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.
Albert Gao breaks down the different kinds of state management libraries available today, with pros and cons for each.
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.
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.
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.
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.
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]
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.
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.
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 is typically used for full-page end-to-end testing, but it can now do more isolated component tests - perfect for smaller integration tests.
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.