React Newsletter #317

State management in 2022, the Rules of Hooks, and storing state in URls

This week's issue is sponsored by Unlayer.

Unlayer provides a drag-and-drop email editor, page builder and popup builder that embeds in your SaaS app. Their React components make it super easy, so you can seamlessly integrate it with the rest of your app.

👉 Check it out (for free).


State Management Libraries in 2022

Albert Gao breaks down the different kinds of state management libraries available today, with pros and cons for each.

Solid.js and Early Function Returns

Solid.js, a reactive UI library that looks like React, has been getting a lot of attention this week. Author Ryan Carniato highlights the biggest difference - Solid.js component functions only run once. There's even more great discussions in the Twitter thread.

Why Conditional Hooks Don't Work

Speaking of early returns, this tweet thread Corbin Crutchley dives into React's internals to show why you can't do an early return before the last hook in a component.


Build a Shopping Site to Learn React Context

Israel Oyetunji walks through building a minimal shopping cart experience. React Context makes it easy to add products to the cart from anywhere in the app.

React and Phoenix LiveView

Bruno Antunes shows how you can connect React to Phoenix (a server-side framework for Elixir) LiveViews by dynamically rendering and updating smaller React apps inside LiveView HTML.



A drop-in library for easily animating DOM transitions. It's cross-framework, but has an easy to use React hook.

The only UI component library you need

KendoReact's 100+ feature-rich components are built for React to help you create web apps much faster. The library is professionally built and includes everything from buttons and dropdowns to fast and performant data grid, scheduler and editor. Easy to integrate, customizable and fully accessible. [sponsored]

LiveKit Components

If you're building real-time audio/video apps with WebRTC, LiveKit takes care of browser differences and state synchronization for you. They've just released pre-built and styled components to make adding it to your app even easier.

React Three Fiber Next.js Starter

3D is becoming more prevalent in websites, and Ryosuke's starter will get you a head start to building interactive 3D scenes with React Three Fiber.

React 18 Streaming SSR

This repo demonstrates how to set up the new streaming server renderer in React 18 from scratch. It uses a Koa backend, but could be adapted to any backend framework.

Playwright Component Testing

Playwright is typically used for full-page end-to-end testing, but it can now do more isolated component tests - perfect for smaller integration tests.


Storing State in URLs

Sam Selikoff demonstrates how to synchronize React state with URLs and the pitfalls to avoid to make it easier to share that state with others.

made with ❤️ by