React 19: A Comprehensive Guide to the Latest Features and Updates

As the most popular JavaScript framework, each React version continually rolls out improvements and new features to further improve web development. Some features in React 18 included automatic batching, new server-side rendering APIs, a new strict mode, and more. The current React version, React 19, was announced at the React Conf 2024 and debuts exciting features including the open-source React Compiler.

In this blog post, we'll dive into the exciting features of the newly released React 19.

Exploring the Key Features of React 19

Are you excited to get acquainted with the new features and start using them? Let’s take a closer look at the major new features of the latest version of React.

React Compiler

One of the major talking points at React Conf 2024 was the release of the open-source React Compiler which further optimizes your code and improves app performance. The compiler translates your React code into JavaScript and handles component rendering and state change in your UI, eliminating the need to use hooks like usecallBack and useMemo. Another interesting feature is that it automatically optimizes your components according to their requirements. You can get started with the new React compiler by following the steps below:

Install the Babel plugin, which the Reactjs Compiler powers::

npm install babel-plugin-react-compiler

After babel-plugin-react-compiler runs, configure your babel config file:

// babel.config.js

const ReactCompilerConfig = { /* ... */ };

module.exports = function () {
  return {
    plugins: [
      ['babel-plugin-react-compiler', ReactCompilerConfig], 
      // ...
    ],
  };
};

To use the React compiler on existing projects, you should start by running the compiler on a set of directories and then proceeding to scale. Here’s a snippet to help you do that:

const ReactCompilerConfig = {
  sources: (filename) => {
    return filename.indexOf('src/path/to/dir') !== -1;
  },
};

The compiler then works only on the React code in the specified directory.

React Server Components

This Reactjs version also includes React Server Components, so you can easily render components on the server. If you’re familiar with Next.js, whose components are server components by default, this is the same idea. Server components have advantages such as faster page load time, better SEO optimization, and overall better performance.

React 19 now offers the flexibility of using server components directly in your application. Similar to how you would use a client component in Next.js by specifying “use client” on the first line of the component, you can also use server components in React by specifying “use server”. Here’s an example of how this is done:

"use server"
export async function getData() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  return res.json();
}

Save this code

Since we explicitly set this to be a server component using “use server”, this component will run only on the server, thereby increasing the app’s performance.

Actions

Actions in React v19 provide a new and efficient way to handle state and data mutation updates in your application. This will be a game-changer when working with forms that require state changes in response to the user’s input. By using the useActionState hook, you can automatically handle errors, submit actions, and manage pending states during data fetching. Here’s an example that handles the various state changes of a user updating their email on a form:

function ChangeEmail({ email, setEmail }) {
  const [state, submitAction, isPending, error] = useActionState(
    async (previousState, formData) => {
      const error = await updateEmail(formData.get("email"));
      if (error) {
        return error;
      }
      redirect("/path");
      return null;
    },
    email,
    null
  );

  return 
    <form onSubmit={submitAction>
      <input type="email" name="email" defaultValue={state} />
      <button type="submit" disabled={isPending}>
      {isPending ? "Updating..." : "Update"}
  </button>
      {error && <p>{error}</p>}
    </form>
  );
}

Save this code

In the React code snippet sample above, we see how the useActionState handles the current state, submit action, pending state, and an error without explicitly, seperately handling the actions of these various states.

Document Metadata

React js 19 allows you to manage a document’s metadata (titles, description, meta tags), improving a web page’s SEO and accessibility. This eliminates the need for developers to resort to packages like react-helmet to manage a document’s metadata. Here’s an example of how you would define a document’s metadata within its component:

Const HomePage = () => {
 return (
    <>
      <title>Pieces for Developers</title>
      <meta name="description" content="Your Workflow Copilot" />
      // Page content
    </>
  );
}

Save this code

Asset Loading

Everyone loves a web application that loads quickly. Loading large images slows down the page load time and affects performance. React 19 solves this problem by loading images and other assets in the background while the user views one page, reducing the load time when the user navigates to a new page. Background asset loading increases the performance and usability of an app or site.

Support for Stylesheet and Async Scripts

With built-in support for stylesheet, this React latest version takes applying styles to the next level. The latest version of React js supports stylesheets defined within the <link>, <style>, and <script> tags. It handles loading stylesheets to the DOM and the order of insertion, ensuring conflict-free execution. React 19 also handles complexities when managing stylesheets, making it easier for developers to implement performant and user-centric styles.

The current version of React also supports asynchronous loading in your apps, leading to a significant performance increase. This feature allows you to place your async script anywhere in your component tree, as React 19 will recognize it and load and execute it just once. This improves the readability of your code since you can simply place async scripts close to components that rely on them.

The Latest Reactjs Hooks

React 19 comes with new and exciting hooks, some of which are improvements to existing hooks. Let’s jump in:

use() hook: The use() hook provides innovation mainly for asynchronous functions or managing states. The use() hook allows developers to pass a promise or context directly within a function without using useEffect() and other logic to manage states. With the use() hook, you can directly access the value of a particular resource within the render function.
useFormStatus hook: With the useFormStatus hook, child components can get information about a form from the parent component. This eliminates the need to pass information from the parent to child component as a prop, allowing for cleaner, more straightforward, and more concise code.
useOptimistic hook: The useOptimistic hook allows you to easily handle optimistic updates, improving user experience. This means that when showing an updated UI to the user while the data fetch process is still on, it is optimistic that the status of the data fetch returns a success rather than a failure.
useActionState hook: As mentioned earlier, the useActionState hook simplifies data mutation and allows you to automatically manage pending states during data fetching, handling errors, and submitting actions.
useFormState hook: This hook allows you to update the state of an application based on the outcome of a form submission. This is particularly useful in user authentication since an application’s state can change based on the user’s input.

Migrating to React 19: Leveraging the Power of Community

All of the features discussed are currently available in the React 19 canary release, with the beta version available to the public. Migrating to new versions of a particular framework often comes with questions, and bugs— that’s where the fast-growing Pieces discord community comes in.

Join a friendly community of awesome developers and stay ahead of updates in the tech space including framework updates, debugging, and exciting use cases of Pieces products and Pieces API.

Conclusion

User experience and ease of development are perhaps the most important factors in web development. This explains why the React team makes a conscious effort to ship new updates that improve both UX and DevEx for React applications. In this blog post, we talked about the features of the newly released React 19 and how it helps improve the performance of your application. Happy coding!