“React 19” so far: Actions, Compiler & Canary?

The development community is buzzing with anticipation for the upcoming React 19 release. Across various platforms, from Reddit to forums and Discord channels, the excitement is palpable. Yet, the specific details of the new features are still a matter of speculation.

Despite this, there are some recent developments and features related to React 19 that merit discussion. This article will focus on providing crucial details about "React Compiler" and hooks, "Actions", and briefly touch on "React Canaries".

Farewell Old Hooks, Hello "React Compiler"!

Alright, let's dive right into it! The revolutionary React Compiler will arrive with React 19, setting the stage to overhaul development by taking over tasks we used to manage with hooks.

So, what's the big deal? Let's cut to the chase and explore how things were done in the “old days” versus now.

1. useMemo, useCallback, memo: The React Compiler is smarter about optimizing and remembering both components and values when it's beneficial, making explicit use of memoization hooks or creating higher-order components unnecessarily.

2. forwardRef: With the React Compiler's method, managing “refs” becomes a breeze as they're treated just like any other prop. This means you can pass them down through components without the fuss, skipping the need for forwardRef.

3. React.lazy: Forget about React.lazy for component lazy loading. Enter the React Suspense Compiler (RSC) and the promise-as-child technique. These tools work together to load components as needed in a slick, hassle-free manner.

4. useContext: Meet the new use(Context) hook, courtesy of the React Compiler. It's a more straightforward way to tap into context values within your components, perfectly in line with the compiler's mission to cut down on unnecessary code.

5. throw promise: Error handling with promises is streamlined in the React Compiler approach. Rather than directly throwing promises, the use(promise) hook is employed to manage asynchronous operations and errors in a more controlled manner.

6. From <Context.Provider> to <Context>: The old way of wrapping components with <Context.Provider> to share context has been streamlined. Now, you can simply use <Context> right in your component tree for a cleaner, more concise syntax.

Navigating these changes might take a bit of getting used to, but they promise to make coding in React a smoother, more enjoyable experience.

Just “Actions”

During the development of Server Actions, the React Labs Team made it clear that they've also made APIs capable of handling data in applications that only work on the client side. 

They're calling this wider set of capabilities “Actions”. Actions let you assign a function to HTML elements like <form>. Here's an example of how it works:

1<form action={search}>
2<input name="query" />
3<button type="submit">Search</button>
4</form>

This function can work both synchronously or asynchronously. You can create it right on the client side using regular JavaScript, or on the server if you use the ‘use server’ directive. With an action, React takes care of the whole process of sending data, and it offers tools like useFormStatus and useFormState to let you see the form's current state and its results.

Actions are sent during a process called a transition, which allows the current page to keep working while the action is happening.

Initially, the focus was on Server Actions for moving data between a client and a server. However, the broader React philosophy is to offer the same way of doing things across different platforms and environments.

Whenever feasible, React Labs aims to ensure that every feature introduced for the client-side is also applicable on the server side, as well as the other way around. Actions are now in the Canary channel and will be part of the next React release.

Extra info: For those creating libraries, you can include custom action={fn} properties in your components using useTransition. The goal is to encourage library creators to use the Actions pattern when making their interfaces. This should make things more consistent for React developers.

Don’t Forget About The “React Canary”!

“React Canary” is the new Canary Island of the React ecosystem (pun intended). It's a prime spot for React developers, introduced by the React Lab Team, allowing the adoption of new, stable features in their near-final design stage, well before their stable server release.

This shift in development approach marks a departure from React's previous method, where features were developed privately within Meta and only unveiled as a finished product. The introduction of Canaries represents a move towards more open development, engaging the community through the React Labs blog series to polish and finalize features. This means early insights into new features during their development phase.

Features like React Server Components, Asset Loading, Document Metadata, and Actions have already made their way to React Canary. Documentation for these features is now available on react.dev

Conclusion

Nevertheless, after several years of development and optimization, the React Lab Team has announced that react@canary is set to transition to react@latest. The new features, as discussed, are designed to be compatible across various environments, ensuring they are ready for production use. Notably, since Asset Loading and Document Metadata might introduce breaking changes for some applications, the upcoming release will be marked as a major update: React 19.

Currently, the specific release date for React 19 remains unannounced. React Conf 2024 is on the calendar for May 15–16 in Henderson, Nevada, where we anticipate receiving more detailed information. Rest assured, we will keep you informed with the latest updates.

In the meantime, feel free to explore our list of available React, React Native, and Node developers. If you'd like more information about our services and why we're so passionate about staying up-to-date with the latest IT trends, don't hesitate to reach out to us. We're here to help!

Sources used in this text

React 19: How React Compiler Will Take Your Code to the Next Level (Medium)

React Labs: What We've Been Working On – February 2024 (React.dev)

React 19 is Coming, What’s New? (Medium)

React 19: Everything you need to know in one place (Daily.dev)