#386 — May 22, 2024 |
|
|
|
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) |
|
IN BRIEF:
|
|
Snappy UI Optimization with 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 📄 The Dilemmas You'll Face When Creating a Component Library Andrico Karoulla 📄 The Best ESLint Rules for React Projects Tim James |
|
🛠 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 |
|