This Week In React #186: React Conf, Compiler, Universal RSC, React-Router, Google Maps, Million Lint, Pigment, Restyle, Storybook, SSRF...

This Week In React #186: React Conf, Compiler, Universal RSC, React-Router, Google Maps, Million Lint, Pigment, Restyle, Storybook, SSRF...


Hi everyone!

This has been a busy week for us 😄. That React conf didn't disappoint! We weren't there, but our flyer was 😇. We not only had great conf announcements (notably the compiler!), but we had great community articles that I had to postpone a few of them to next week.

Although it's unlikely to calm down because 2 major confs start tomorrow:

  • Vercel Ship, during which Next.js 15 should be announced with a less aggressive caching strategy, Turborepo in dev, Compiler support and more.

  • App.js Conf, also with great React Native announcements expected.

Have a good read and see you next week!

  • 🗓 Chain React Conf - Portland, OR - July 17-19. The U.S. React Native Conference is back with engaging talks and hands-on workshops! Get 15% off your ticket with code “TWIR”

💡 Subscribe to the official newsletter to receive an email every week!

banner


💸 Sponsor

React-admin: The Open-Source Framework for B2B apps

React-admin: The Open-Source Framework for B2B apps

Speed up the development of your single-page applications with the acclaimed frontend framework🚀. Built with TanStack Query, react-hook-form, react-router & material UI, React-admin lets you create rich user experiences on top of REST or GraphQL APIs.

Beyond CRUD pages, React-admin has many advanced functionalities to meet your needs. Its complete toolkit offers a calendar 📅, customizable Kanban board, content versioning 🔄, nested forms & more. Add real-time updates 🎥, tree 🌲 structures and detailed audit logs via headless hooks and themeable components.

Ready to take your development to the next level? Make React-admin your go-to framework & join over half a million daily users. Try it now!


⚛️ React

React Conf 2024 Recap

React Conf 2024 Recap

The React team published a recap blog post of React Conf, just in time for today’s newsletter 🤗. It presents all the talks and the main announcements. I haven't seen all of them yet, but my highlights so far are:

  • React 19 is in RC, and a stable release is expected in the next few weeks

  • The React Compiler is out and looks really powerful

  • Universal React Server Components are coming to Expo and the demo is really impressive

  • Remix and React Router are merging. Remix v3 will finally be React Router v7.

  • The Real-time React Server Components demo makes RSCs stateful and opens new possibilities that remind me of Phoenix LiveView

  • React now coordinates HTML tags, which is hugely underrated

Again these are just my personal favorites. We already covered most React 19 features in the newsletter, and the React 19 beta blog post remains the reference for discovering all the new features coming in the next major version.


React Compiler

The React Compiler is out

The compiler probably deserves its own section right. TLDR: the compiler optimizes your existing code automatically and gives you fine-grained reactivity using regular JS values. Try the React Compiler Playground to see how it works, and understand how it optimizes your code.

It has been successfully rolled out on Instagram web with great results (2.5x faster interactions). It statically analyses your code, one file at a time, and memoizes what can safely be optimized, with even greater granularity than you could do by hand. If you follow the Rules of React, you shouldn’t need to rewrite any code. The ESLint plugin tells you about problematic code that the compiler detects. It does not play well with proxy-based solutions like MobX. Configuration options and opt-in/out directives enable you to try the compiler gradually on your codebase.

The compiler is initially written in TypeScript and ships with Babel bindings, but don’t be disappointed because its logic is decoupled. Support for SWC should come next, and we’ll probably have a port in Rust a bit later (they already made a POC for that to ensure it’s feasible).

It is worth mentioning that the React team always had in mind to have a compiler for React (see Andrew Clark’s thread). And this is only the beginning, they now have the infrastructure to build even more powerful things. I’m pretty sure sooner or later we won’t need anymore a dependency array, and that the compiler will be able to optimize fine-grained context consumption (relevant tweet).

🔗 Related resources worth checking:


Merging Remix and React Router

Merging Remix and React Router

This is another big announcement from React Conf. Remix and React Router have converged so much (thanks to the Vite plugin and SPA mode) that it doesn’t really make sense anymore to keep both. Technically, instead of shipping Remix v3, they plan to add an optional Vite plugin to React Router v7, which will remain retro-compatible, and also bring new features (RSC, server-actions, static pre-rendering…). See also the follow-up post Incremental Path to React 19: React Conf Follow-Up.



💸 Sponsor

Next.js auth tutorial with RSCs and Server Actions

Next.js auth tutorial with RSCs and Server Actions

The latest tutorial with WorkOS and Sam Selikoff shows how you can easily add AuthKit's hosted login box to a Next.js app:

📚 Get started using the Authkit <> Next.js integration library
🤖 Set up environment variables, configure the callback route and middleware, and implement signIn and signOut functionalities
⚙️ Protect routes in the Next.js app from unauthenticated users with the getUser function

AuthKit can be used with WorkOS User Management, which supports MFA, identity linking, email verification, user impersonation, and more.

Best of all, it's free up to 1,000,000 MAUs 🚀


📱 React-Native

This section is authored by Benedikt.

React Conf is officially behind us, and I hope you had a chance to look at the recordings of the awesome presentations on YouTube. My biggest meta-takeaway was just how much RN content there was in the conference! As RN is very much developed out in the open and in collaboration with the whole community, there were no surprising “big announcements,” but it was a very good summary of the current state of RN and an outlook on the road ahead. The most impressive and inspiring part for me was Evan Bacon’s vision for Universal React Server Components, which he presented using an absolute killer demo that I’m urging you to watch for yourself. I’ve put my main takeaways into some bullet points for you:

  • RN is thriving: Over 2M weekly downloads of RN now, 30 shipped versions of RN in 2024 so far

  • The new Architecture is now in Beta

  • Expo is now officially recommended for all new apps

  • New reactnative.dev landing page launched

  • React Conf app is open source

  • Expo’s vision for Universal RSC



🔀 Other


🤭 Fun

alt

alt

(Ok that React Compiler one is not technically accurate, but still fun 😇 sorry Compiler team)

See ya! 👋

Did you find this article valuable?

Support Sébastien Lorber by becoming a sponsor. Any amount is appreciated!