This Week In React 182

v18.3, useDeferredValue, Next.js, DevTools, Zustand, CSS-in-JS, R19, Remix, Jest, XState, Astro, RNSC, Strict DOM, 3D, Metro, Worklets, TC39, TypeScript, Effect, Rspack, GraphQL...

Apr 19, 2024

Hi everyone!

This week we have a nice Next.js release and many interesting community blog posts.

We can also feel that the React core team is working hard to polish the remaining details for React 19. Unexpectedly, a v18.3 is finally planned with extra warnings. React Native 0.74 is also around the corner.

This week I'd like to introduce you to ECMAScript News. It's my favorite newsletter to keep up to date with ES, TC39, JS tooling, and runtimes.

Next week we have React Connection and React Native Connection conferences in Paris. See you there for those that attend 👋. You can still get a -20% discount with my partner code "TWIR".

💡 Check this newsletter on Twitter - visual format 🎨

To support me:

😘 Recommend the newsletter to your friends: it really helps!
💸 Sponsor the newsletter
🧵 Retweet the latest Twitter thread

💸 Sponsor

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

Used by 25,000 companies, React-admin is the leading framework for building ERPs, internal tools, and B2B apps with React. Here are 3 reasons to try it:

1️⃣ Rapid Development 🏎️🏁 Boasts a library of 170+ hooks and components, allowing you to focus on the unique aspects of your application rather than repetitive CRUD operations.

2️⃣ Customizable and Extensible ✨💫 Built on a headless core, react-admin enables complete customization of your app's look and feel. And it gets out of the way when you need custom logic.

3️⃣ Built-in Best Practices 🤓 React-admin integrates 7 years of best practices in data fetching, performance, form handling, and security, ensuring a robust and enjoyable developer experience.

Best of all: it's free and seamlessly integrates with your API (no SSO Tax). Try it now 😉

⚛️ React

Next.js 14.2

Until we get React 19 and Next.js 15, this new minor version includes development, production, and caching improvements. The highlights are:

Turbopack (RC): 99.8% of tests passing for next dev --turbo
Build / Production Improvements: Reduced memory usage
Caching Improvements: Configurable client-side cache revalidation with staleTimes
Errors DX: Better hydration mismatch messages

I’m excited to see a great React hydration mismatch error dialog already implemented in Next.js! As I write this, Turbopack is 99.9% ready for development usage (6 integration tests missing). For build usage, it’s 75% ready so we’ll have to wait a bit more.

💸 Clerk - A complete suite of embeddable UIs, flexible APIs, and admin dashboards to authenticate and manage your users.
👀 React Core - Upcoming v18.3 release: The React team has finally decided to release a v18 minor version. It should not contain any behavior change but will emit new warnings for deprecated features to help us upgrade to React 19. It should warn us when using string refs, defaultProps on FC/memo components, or when spreading a key prop (🐦 preview).
👀 React Core - useDeferredValue’s initialValue: In upcoming React 19 canary releases, this hook will take a new 2nd argument affecting the initial render. It will return the initialValue on initial render, and schedule a re-render in the background with the value returned.
👀 React Core - Automatically reset forms after action finishes: This new React 19 behavior only affects uncontrolled inputs, and aligns with the native platform behavior (it will now be the same with/without JS). It will only affect uncontrolled inputs. They also added a new public API DOM.requestFormReset so that form abstraction authors can implement this behavior too.
👀 React Core - DevTools v5.1
👀 React Core - Document new react-reconciler methods
🗓 React Summit - 🇳🇱 Amsterdam - 14-18 June - Get a 10% discount with code "TWIR". Awesome lineup including Evan Bacon, Kent C. Dodds, Theo, Tim Neutkens, Mark Erikson, Fred Schott and so many others!
📜 Zustand and React Context: I cannot agree more with Dominik that suggests putting your Zustand store instance in a React context. This way, you can initialize the store from props, make things easier to test, and allow using a store on multiple subtrees.
📜 CSS in React Server Components: Josh explains why Styled-Components/Emotion do not play well with RSC, and presents alternative solutions providing a similar styled API, like Linaria, Panda, or Pigment. Avoid FOMO, there's no need to adopt RSCs and these libraries now if your app already works fine.
📜 R19, a dead-simple React 19 framework - Part 2 - The Code; How it works under the hood!: Great technical deep dive into what it takes to create a custom React 19 / RSC / Server Actions setup on top of Bun.
📜 Rebuilding "Remix Contacts" in Next.js 14 with Transitions, Server Actions and Prisma: A nicely detailed walkthrough of converting an official Remix tutorial app to Next.js while preserving the progressive enhancement behavior. It also explains the differences between the 2 approaches and lists the pros/cons of each implementation. There’s no clear winner, although Remix looks quite competitive!
📜 The Two-Tree Problem with Styling on the Web: An interesting read on the DOM/CSS tree separation, and whether React CSS-in-JS or Tailwind solves this problem. The author is pro-inline-style (like me BTW).
📜 Improving our Jest execution time by 300%: Investigations of Jest execution time on a React codebase. RTL getByRole was a bottleneck, among other things.
📜 Empathetic Coding - Button Component: Nice article showing the steps to design a React button component using TypeScript and Tailwind, keeping in mind maintenance and convenience.
📜 Overcoming Next.js' Search Params Limitation in Layouts: Suggest using parallel routes to overcome the limitation.
📜 The process.env frontend time bomb (plus: a sustainable definition of “fixed”): Instead of spreading process.env across your codebase, parses env variables with Zod and exposes app config in a React context.
📜 How to Style a React Application
📜 Understanding Layout and Template Next.js App Router
📦 Next.js View Transitions: Shu from Vercel released a basic userland implementation of CSS View Transitions, although it looks possible that Next.js will provide this feature later.
📦 XState Store: New tiny typesafe event-driven state manager, including a React useSelector API. This reminds me a bit of both Redux and Zustand.
📦 Astro 4.6 - Manual i18n routing, move dev toolbar, CSRF protection, cookies…
📦 Next-Video 1.0 - The easiest way to add video in your NextJS app
📦 Mantine 7.8.0 - Uncontrolled form mode, form.getValues, form.watch, automatic px to rem conversions
📦 NextUI 2.3 - Date/Time/Calendar components
🎥Theo - From 0 to Production - The Modern React Tutorial (RSCs, Next.js, Shadui, Drizzle, TS and more)
🎥 React Paris 2024 - Conf Talks YouTube Playlist
🎥 Ryan Toronto - Handling RSC Errors in Next.js

💸 Sponsor

FormBuilder SDK for React

A complete form solution for React projects, used by Fortune 500 companies. With easy-to-use open-source components for building and running powerful forms inside your React app. Extensively documented, up in minutes, and deeply customizable.