⚛️ React 19 New Features

Exploring some of the features of React 19

React Compiler

React 19 will include a compiler much like Svelte or Vue. This will not only make React faster but will automate certain tedious tasks and make less work for the developer.

Automatic Memoization

In current APIs, we use useMemo, useCallback, and memo APIs to manually tune how much React re-renders on state changes. But manual memoization is a compromise. It clutters up our code, is easy to get wrong, and requires extra work to keep up to date.

With the compiler, these hooks will now be a thing of the past.

use() Hook

The use hook lets you read and asynchronously load a resource such as a promise or a context. It can also be used in loops and conditionals, unlike other hooks. It can be used to fetch data in some cases replacing useEffect.

use(context) will replace the useContext(context) hook.

Call use in your component to read the value of a resource like a Promise or context.

import { use } from 'react';
 
function MessageComponent({ messagePromise }) {
  const message = use(messagePromise);
  const theme = use(ThemeContext);
  // ...

Unlike useContext, use can be called in conditionals and loops like if.

function HorizontalRule({ show }) {
  if (show) {
    const theme = use(ThemeContext)
    return <hr className={theme} />
  }
  return false
}

use client & use server Directives

Components can be rendered on the server, which makes for better SEO, faster page load times and easy data fetching. Obviously, you will need a Node.js(or maybe deno, bun) server to run the use server¹ component.

Actions

Actions 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. Since Actions support async functions, you can use async/await in transitions. This allows you to show 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.

useOptimistic

As its name indicates, useOptimistic manages optimistic state updates. With this hook, you can apply temporary updates that are automatically reverted once the final state is committed. For Actions, this allows you to 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 works using regular async/await, so it works the same whether you’re using fetch on the client or a Server Action from the server.

Document Metadata

Built-in support for metadata like <title>, <meta> and metadata <link> tags. These work the same way in all environments, including fully client-side code, SSR, and RSC.

Asset Loading

NOw Suspense is integrated 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> is ready to be displayed. There are also new Resource Loading APIs added like preload and preinit to provide greater control for when a resource should load and initialize.

Other Changes & Features

• ref passed as a regular prop (No more forwardRef)
• Web Components
• No More React.lazy
• <Context.Provider> replaced with <Context>