--- title: "The future is compiled" publication: "React Status" issue: 386 published_at: "2024-05-22" canonical_url: "https://react.statuscode.com/issues/386" --- Plus Mux gets very excited about React 19 and its new features, and over a million developers are using Next.js each month. | #​386 — May 22, 2024 [Read on the Web](https://react.statuscode.com/issues/386) Together with [![Sentry logo\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,e_trim,w_350,h_100/e_make_transparent/co_white,e_outline:7/xdmchdxkka938lxfr86f.png)](https://blog.sentry.io/the-forensics-of-react-server-components/?utm_medium=paid-community&utm_source=reactstatus&utm_campaign=fy25q2-jtbd-RSCs&utm_content=newsletter-jtbd-RSCs-learnmore) React Status [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/ivnit6svltiu8cf7txwl.jpg)](https://react.dev/learn/react-compiler) [Say Hello to the _React Compiler_](https://react.dev/learn/react-compiler) — Last week’s [React Conf](https://conf.react.dev/) 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](https://playground.react.dev/) so you can experiment. The React Team 💡 If you like Jack Herrington's easy-to-follow takes, [▶️ he covers the compiler in depth here.](https://www.youtube.com/watch?v=PYHBHK37xlE) Dan Abramov also wrote [a helpful X/Twitter thread with his thoughts](https://x.com/dan_abramov2/status/1792917457478242687) on how the compiler came together and why it matters. [React 19 Lets You Write Impossible Components](https://www.mux.com/blog/react-19-server-components-and-actions) — React 19 ([still in beta](https://react.dev/blog/2024/04/25/react-19)) 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) [![\](https://copm.s3.amazonaws.com/19246ca1.png)](https://blog.sentry.io/the-forensics-of-react-server-components/?utm_medium=paid-community&utm_source=reactstatus&utm_campaign=fy25q2-jtbd-RSCs&utm_content=newsletter-jtbd-RSCs-learnmore) [The Forensics Of React Server Components (RSCs)](https://blog.sentry.io/the-forensics-of-react-server-components/?utm_medium=paid-community&utm_source=reactstatus&utm_campaign=fy25q2-jtbd-RSCs&utm_content=newsletter-jtbd-RSCs-learnmore) — 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](https://blog.sentry.io/the-forensics-of-react-server-components/?utm_medium=paid-community&utm_source=reactstatus&utm_campaign=fy25q2-jtbd-RSCs&utm_content=newsletter-jtbd-RSCs-learnmore). Sentry sponsor [Merging Remix and React Router (Sort Of..)](https://remix.run/blog/merging-remix-and-react-router) — _“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](https://remix.run/blog/incremental-path-to-react-19) or, if you’d prefer, Alem Tuzlak [▶️ explains all in just 17 minutes.](https://www.youtube.com/watch?v=8i72eWA6BqA) Brooks Lybrand (Remix) **IN BRIEF:** - [Vercel has raised $250m](https://www.reuters.com/technology/vercel-completes-250-mln-series-e-round-325-bln-valuation-2024-05-16/) at a $3.25bn valuation. As part of the release, it's noted _"every month more than 1 million software developers use its Next.js technology."_ - Chris Coyier [got to wondering](https://front-end.social/@chriscoyier/112469573847186257) if React-specific components could end up being the next "jQuery plugins." All hail Web Components? - At last week's Google I/O, Una Kravets gave [▶️ a great talk about the latest capabilities of the Web, UI-wise.](https://www.youtube.com/watch?v=_-6LgEjEyzE) [Snappy UI Optimization with `useDeferredValue`](https://www.joshwcomeau.com/react/use-deferred-value/) — A deep dive into the `[useDeferredValue](https://www.joshwcomeau.com/react/use-deferred-value/)` hook using this respected educator’s own _[Shadow Palette Generator](https://www.joshwcomeau.com/shadow-palette/)_ 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](https://lazamar.github.io/virtual-dom/) – If you’d like to understand the basics behind the concept. Marcelo Lazaroni 📄 [Sneaky React Memory Leaks: How `useCallback` and Closures Can Bite You](https://schiener.io/2024-03-03/react-closures) Kevin Schiener 📄 [The Dilemmas You'll Face When Creating a Component Library](https://github.com/andrico1234/the-dilemmas-youll-face) Andrico Karoulla 📄 [The Best ESLint Rules for React Projects](https://timjames.dev/blog/the-best-eslint-rules-for-react-projects-30i8) Tim James 📰 Classifieds 🗝️ [Userfront](https://userfront.com/?&utm_source=react-statuscode-com&utm_medium=newsletter&utm_campaign=classified_listing&utm_content=transformational) is an auth & identity platform that transforms your business to serve free, freemium and enterprise customers. [Try it for free](https://userfront.com/?&utm_source=react-statuscode-com&utm_medium=newsletter&utm_campaign=classified_listing&utm_content=transformational). --- Your fastest path to production. [With Render, you can build, deploy, and scale your apps with unparalleled ease](https://render.com?utm_source=coopeprpress&utm_medium=cooperpress) – from your first user to your billionth. --- Implement RBAC & easily editable roles in React with Cerbos. [Read the guide](https://bit.ly/3yacnn0). 🛠 Code, Tools & Libraries [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/ocdoi2rs7vtgljtobo8p.jpg)](https://github.com/vasturiano/react-force-graph) [react-force-graph: 2D, 3D, VR and AR Force Directed Graphs](https://github.com/vasturiano/react-force-graph) — A way to create visualizations of complex network / graph relationships. There’s a big [live demo](https://vasturiano.github.io/react-force-graph/example/large-graph/) as well as [numerous examples with source.](https://github.com/vasturiano/react-force-graph?tab=readme-ov-file#examples) Vasco Asturiano [Restyle: A New CSS-in-JS Library for Modern React](https://reactstyle.vercel.app/) — So modern that you need to use React Canary, because it uses [inline, hosted stylesheets.](https://react.dev/reference/react-dom/components/style#rendering-an-inline-css-stylesheet) 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](https://react-international-phone.vercel.app/) — Not only can you pick a country, it can also guess the country from a number, where possible. [react-phone-number-input](https://catamphetamine.gitlab.io/react-phone-number-input/) is another option in this space. Yurii Brusentsov [restore-scroll: Restore Scroll Position of Elements on Page Navigation](https://github.com/epicweb-dev/restore-scroll) — 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](https://github.com/smeijer/spin-delay) — 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](https://github.com/cyntler/hamburger-react) — Hook-based, and they use CSS transitions to stay lightweight. Luuk de Vlieger - [Redwood 7.6](https://github.com/redwoodjs/redwood/releases/tag/v7.6.0) – GraphQL-driven React framework. Now with experimental React Compiler support. - ♟︎ [React Chessboard 4.6](https://github.com/Clariity/react-chessboard) – Render chess boards with React. See it [in action here.](https://react-chessboard.vercel.app/?path=/story/example-chessboard--play-vs-random) - [schedule-x 1.42](https://github.com/schedule-x/schedule-x) – Material design event calendar and date picker. - [React Uploady 1.8.1](https://github.com/rpldy/react-uploady) – Components and hooks for file uploading. - [ka-table 10.0](https://github.com/komarovalexander/ka-table) – Lightweight table component. ([Demos.](https://komarovalexander.github.io/ka-table/#/overview)) - [MUI X 7.5](https://github.com/mui/mui-x/releases/tag/v7.5.0) – Popular React component suite. - [Million 3.1](https://github.com/aidenybai/million) – Virtual DOM replacement. Curated by Peter Cooper and Terence C. Gannon. A **[Cooperpress](https://cooperpress.com/)** publication. [Change your email address](https://react.statuscode.com/edit_subscription/*|UID|*) or[Stop getting this newsletter](https://react.statuscode.com/leave/*|UID|*) © Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom