#​386 — May 22, 2024

Read on the Web

Together with  Sentry logo
React Status

Say Hello to the React Compiler — Last week’s React Conf was quite the banger, as the kids say nowadays. The biggest reveal was the open sourcing of React’s experimental compiler, a tool designed to optimize React code at build time. Want to play without breaking everything? They created an React Compiler Playground so you can experiment.

The React Team

💡 If you like Jack Herrington's easy-to-follow takes, ▶️ he covers the compiler in depth here. Dan Abramov also wrote a helpful X/Twitter thread with his thoughts on how the compiler came together and why it matters.

React 19 Lets You Write Impossible Components — React 19 (still in beta) brings all sorts of new ideas to the table, but is the complexity worth it? The folks at Mux have been leaning on many of React 19’s features for a while (thanks to React Canary) and are very excited about their potential.

Darius Cepulis (Mux)

The Forensics Of React Server Components (RSCs) — A deeper dive into React Server Components, exploring how they work, how streaming works, what RSC Payload is, and a whole bunch of things to improve React apps performance. Read the blog.

Sentry sponsor

Merging Remix and React Router (Sort Of..)“What we planned to release as Remix v3 is now going to be released as React Router v7.” Is Remix going away? No. Many people read too much into this news, but Ryan Florence clears things up in this follow-up or, if you’d prefer, Alem Tuzlak ▶️ explains all in just 17 minutes.

Brooks Lybrand (Remix)


Snappy UI Optimization with useDeferredValue — A deep dive into the useDeferredValue hook using this respected educator’s own Shadow Palette Generator tool as a case study. Not just the edification is valuable — the tool itself is useful, too.

Josh Comeau

📄 Creating a Virtual DOM in 200 Lines of JavaScript – If you’d like to understand the basics behind the concept. Marcelo Lazaroni

📄 Sneaky React Memory Leaks: How useCallback and Closures Can Bite You Kevin Schiener

📄 The Dilemmas You'll Face When Creating a Component Library Andrico Karoulla

📄 The Best ESLint Rules for React Projects Tim James

📰 Classifieds

🗝️ Userfront is an auth & identity platform that transforms your business to serve free, freemium and enterprise customers. Try it for free.

Your fastest path to production. With Render, you can build, deploy, and scale your apps with unparalleled ease – from your first user to your billionth.

Implement RBAC & easily editable roles in React with Cerbos. Read the guide.

🛠  Code, Tools & Libraries

react-force-graph: 2D, 3D, VR and AR Force Directed Graphs — A way to create visualizations of complex network / graph relationships. There’s a big live demo as well as numerous examples with source.

Vasco Asturiano

Restyle: A New CSS-in-JS Library for Modern React — So modern that you need to use React Canary, because it uses inline, hosted stylesheets. The upsides? Loading styles on demand, de-duplicated styles, and it’s happy both server and client side.

Travis Arnold

☎︎ react-international-phone: A Phone Number Input Component — Not only can you pick a country, it can also guess the country from a number, where possible. react-phone-number-input is another option in this space.

Yurii Brusentsov

restore-scroll: Restore Scroll Position of Elements on Page Navigation — This means not only the BODY element’s scroll position can be restored, but any scrollable element.

Kent C. Dodds

spin-delay: A Smart Spinner Helper for React — If something’s only going to take 50ms to load, do you really need to render a loading spinner? spin-delay makes the logic smarter.

Stephan Meijer

 hamburger-react: Animated 'Hamburger Menu' Icons — Hook-based, and they use CSS transitions to stay lightweight.

Luuk de Vlieger