~reactstatus | Issue 386 - The future is compiled (11)

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.

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.

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.

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.

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.

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.

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.

☎︎ 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.

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.

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.