Major React 19 Update: React Compiler and All You Need to Know

React Forget (Optimizing Compiler)

The React team introduced React Forget at React Conf 2021, a compiler that automatically generates the equivalent of useMemo and useCallback for more efficient re-rendering. The latest update reveals that the compiler is now complete, marking a significant milestone in its development, which has been ongoing for nearly three years. In 2022, during their second update on the new optimizing compiler, the team also announced the creation of a playground for the compiler. This playground aims to simplify the development process by providing real-time outputs of the compiler, allowing developers to explore and understand its inner workings. Additionally, the playground will be included with React 19. It’s worth noting that React Forget is already being used on Instagram, and the Meta Company plans to implement it in other products as well.

React is too Reactive

“React can sometimes re-render too much when state changes.”

Their solution for this issue was manual memoization on the component level. However, manual memoization is comprehensive and prone to mistakes during implementation. While it’s reasonable to have a memoization option, the React team is not satisfied with the current solution. React, being a simple state-based UI library, appeals to many types of developers. To automate complex comprehensive optimizations, the React team is working on developing the React Compiler to handle these tasks for developers.

React 19, as described by Andrew Clark, promises to streamline the development process by potentially making certain APIs, such as UseMemo, useCallback, forwardRef, React.lazy, useContext, and ContextProvider, unnecessary. This simplification is expected to enhance the overall React experience, making it more efficient and user-friendly. Clark’s tweet has generated excitement within the React community, signaling a significant advancement in the React ecosystem.

Actions

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

Server actions have been renamed as simply “actions” in React 19. The React team initially sought solutions for sending data from the client to the server with Server Actions. During the development of Server Actions, they extended these APIs to support data handling in client-only applications as well.

By default, actions are submitted within a transition, maintaining the current page’s interactivity while the action is processing. Since actions support async functions, the React team has also added the ability to use async/await in transitions. This allows developers to display pending UI with the isPending state of a transition when an async request like fetch starts, and show the pending UI all the way through the update being applied.

In addition to actions, the React team is introducing a feature called useOptimistic for handling optimistic state updates. This hook enables developers to apply temporary updates that are automatically reverted once the final state commits. For actions, this means you can optimistically set the final state of the data on the client, assuming the submission is successful, and revert to the value for data received from the server. It operates using regular async/await, ensuring consistent behavior whether you’re using fetch on the client or a Server Action from the server.

Library authors can now implement custom action={fn} props in their components using useTransition. The React team encourages libraries to adopt the Actions pattern for a consistent developer experience. React aims for a unified programming model across platforms, making it easier to upgrade to different environments. Actions are available in the Canary channel and will be in the next React release.

New Features in React Canary

Directives

“use client” and “use server” are bundler features for full-stack React frameworks. They mark the “split points” between the two environments: “use client” generates a <script> tag (like Astro Islands), while “use server” generates a POST endpoint (like tRPC Mutations). They enable writing reusable components that combine client-side interactivity with server-side logic.

Document Metadata

Document Metadata: React now has built-in support for rendering <title>, <meta>, and metadata <link> tags anywhere in your component tree. These tags function consistently across all environments, including fully client-side code, SSR, and RSC. This built-in support aligns with features pioneered by libraries like React Helmet.

Asset Loading

React has now synchronized Suspense with the loading lifecycle of resources such as stylesheets, fonts, and scripts. This ensures React considers these resources when determining if the content in elements like <style>, <link>, and <script> is ready to be displayed. Furthermore, new Resource Loading APIs like preload and preinit have been introduced, offering enhanced control over when a resource should load and initialize.

Conclusion

In conclusion, React 19 is a major update that introduces several new features and improvements to the React ecosystem. The most significant addition is the React Compiler, which automatically generates the equivalent of useMemo and useCallback for efficient re-rendering. Additionally, Actions and useOptimistic have been introduced to handle data submission and optimistic state updates, respectively. The update also includes new features like Directives, Document Metadata, and Asset Loading, which provide enhanced control and flexibility for developers. Overall, React 19 is a significant step forward in making React more efficient, powerful, and user-friendly for developers.

It’s important to note that the release date for React 19 is not official yet, but it is anticipated to be either later this year or at the beginning of the next year. This major update promises to bring significant improvements and new features to the React ecosystem, making it more efficient and user-friendly for developers.

Happy coding!

You can Follow me on Github

You can Connect me on LinkedIn

You can Buy me a Coffee