What's cooking at React Labs for React-19 ?
Yes! React 19 will have it's own compiler. In fact the compiler is already being used in instagram.com in production.
React Compiler
Yes! React 19 will have it's own compiler. In fact the compiler is already being used in instagram.com in production.
According to React.dev the compiler will be there to help the developers to deal with excessive re-rendering in react components every time component state changes. We already have react features like memoization to deal with these situations but that solution is manual. Manual memoization is a compromise. It clutters our code, is easy to get wrong, and requires extra work to keep up to date.
React Compiler is able to compile code safely by modeling both the rules of JavaScript and the “rules of React”. For example, React components must be idempotent — returning the same value given the same inputs — and can’t mutate props or state values. These rules limit what developers can do and help to carve out a safe space for the compiler to optimize.
React compiler attempts to detect when code doesn’t strictly follow React’s rules and will either compile the code where safe or skip compilation if it isn’t safe.
If you want to see how React Compiler works. checkout this youtube video.
Actions
Actions will allow you to pass a function to DOM elements such as <form/>
<form action={search}>
<input name="query" />
<button type="submit">Search</button>
</form>
The action function can operate synchronously or asynchronously. You can define them on the client side using standard JavaScript or on the server with the 'use server' directive. When using an action, React will manage the life cycle of the data submission for you, providing hooks like useFormStatus, and useFormState to access the current state and response of the form action.
By default, Actions are submitted within a transition, keeping the current page interactive while the action is processing. You might want to block the interactivity until the response comes, like showing a loading/pending UI. Actions support async functions, React has added the ability to use async/await in transitions. This allows you to show loading/pending UI with the isPending state of a transition when an async request like fetch starts, and show the loading/pending UI all the way through the update being applied.
A new hook called useOptimistic is also being introduced for managing optimistic state updates. For example in most cases when you are optimistic that the submission will succeed, and you immediately want to show the user a success, giving an impression of high speed interactivity. With useOptimistic 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.
React Canary
React folks has introduced React Canaries, where you can get access to the new features using a canary version even before the official release.
React Server Components, Asset Loading, Document Metadata, and Actions are some of the new features in React Canary are complete and ready to release.
Directives
If you are using React Server Components, you will now have two directives available to run code either on server or client. 'use Client' and 'use Server' are bundler features designed for full-stack react frameworks. Together, they let you write reusable components that compose client-side interactivity with the related server-side logic.
Document Metadata
If you have worked with Next.js you already know how it allows you to add meta tags in your pages. Now this feature will be available to you in react even if you are not using Next.js There is built-in support for rendering <title>, <meta>, and metadata <link> tags anywhere in your component tree. These work the same way in all environments, including fully client-side code, SSR, and RSC.
Asset Loading
They have integrated Suspense with the loading lifecycle of resources such as stylesheets, fonts, and scripts so that React takes them into account to determine whether the content in elements like <style>, <link>, and <script> are ready to be displayed. Two new Resource Loading APIs are also being introduced to support developers to decide when a resource should load and initialize, respectively preload and preinit
Web Components support
Though not much details has been shared on the topic, React 19 will come with some type of support for Web Components as well.
Offscreen (renamed to Activity)
Offscreen refers to the parts of the application that are not visible in the screen. At React there was some research going on, on how to handle these parts in order to optimize the apps. This feature has now been renamed to Activity, because not necessarily all the part of the application that are off screen only to be inactive. There can be parts of application be in-active if they are behind a modal for example. The Activity feature will allow developers to mark some parts of the application to be active or in-active in order to optimize the application rendering and resource usage.
If you want to try out React Canary, here is how you can install it:
//for npm
npm install react@canary react-dom@canary
//for yarn
yarn add react@canary react-dom@canaryReferrence:
