What’s New in React 19? A Developer’s Guide to Next-Gen Features

As the complexity of web applications continues to increase and user demands get higher, we need better tools to build these apps. The latest big leap from one of the most used libraries for modern web development released its new version: React 19. While the complete version is not out, users can still learn from its Release Candidate (RC) version which will provide a clear overview of all kinds of improvements and features that developers expect to exist. This article provides some context for React 19 and focuses on the changes it introduced.

Evolving Needs of Web Development

The way we do (and think of) web development is constantly changing in order to take on applications faster, interactivity and importantly SEO-friendly. These days modern web applications need to provide more seamless user experiences, manage complex state leanly, and adapt to poor network conditions. More to the point, search engine optimization (SEO) is still a necessity for you to be seen, so you need server-side rendering solutions that are efficient.

React’s Evolution to Address These Needs

React has consistently adapted to meet these evolving demands. From introducing Hooks in React 16.8, which revolutionized state management and side effects, to enhancing Concurrent Rendering in React 18 achieving better performance and responsiveness, each version has built upon the last to offer developers powerful tools for building dynamic user interfaces.

With the introduction of Server-Side Rendering (SSR), Static-Site Generation (SSG), and Incremental Static Regeneration (ISR), React has significantly improved initial load times and SEO capabilities. These advancements have laid the groundwork for React Server Components (RSC), a pivotal feature in React 19 that promises to further enhance performance, maintainability, and developer experience by allowing components to render on the server and client seamlessly.

Major React 19 changes

React 19 brings a suite of new features and improvements designed to streamline development, boost performance, and enhance user experience. Below, we explore these changes in detail, complete with some code comparisons between React 18 and React 19 to illustrate the enhancements.

Actions

Actions replace traditional event handlers, integrating seamlessly with React transitions and concurrent features. They simplify state management by handling pending states and errors automatically, making UI interactions more responsive.

In the past, we had to use the onSubmit event to trigger actions like searching. However, this was limited to client-side operations only:

Actions can be executed either on the server-side (similar as Next.js Server Actions do) or the client side. In our JSX, with <form/>, we will be able to drop the onSubmit event and instead use an attribute called action. The value of the action attribute will be a method to submit the data on either the client or on the server side.

In this example submitData is the action in which you can execute both synchronous and asynchronous operations (mostly for making POST requests). This makes working with forms and handling data easier for us.

New Hooks

React 19 introduces several new hooks that complement Actions, forms states, status, and visual feedback management more intuitively.

useActionState

useActionState wraps managing form states and submissions. Using Actions, it will wrap the capture of form input data, handle validation and error states for you, reducing the need to create any custom state management logic. Also, useActionState exposes a pending state that can be used to show a loading indicator while the action is executing.

Example using useActionState (in conjunction with the createUser action):

useFormStatus

useFormStatus manages the status of the last form submission, useful for shared form components or multiple forms on a single page. It must be called from inside a component that is also inside a form.

Example using useFormStatus:

useOptimistic

useOptimistic lets you render an earlier state while an async action is in progress. It takes any state as an argument and returns the copy of state that may be different during an async action like network request. The returned state is referred to as the "optimistic" state because it's often used to instantly show the user the result of taking an action, even though the action actually takes some time to complete. This allows the UI to be instantly updated while a background task, like a network request is pending to be completed, then automatically reconciles with the server response once the action completes.

Example using useOptimistic:

‍

New API: use

The use function provides a powerful new API for handling promises and contexts during rendering. Unlike traditional hooks, use can be called conditionally, within loops, and early returns, offering greater flexibility in managing asynchronous data and context dependencies.

In React 18 we had to use a combination of useEffect & useState to wait a promise to be solved and to store its result:

In React 19 we have use which reduces complexity and returns the value that was read from the resource, that can be either a promise or a context:

‍

Ref as a Prop & Ref Callbacks

React 19 simplifies ref usage by allowing refs to be passed directly as props, eliminating the need of using forwardRef. Additionally, it introduces ref callbacks that support cleanup functions, enhancing resource management when components unmount.

On React 18 we had to use forwardRef:

On React 19 we can use ref directly as prop:

This simplifies syntax by removing forwardRef, making component definitions cleaner. Also, we can pass a cleanup function which receives the ref as param and will be executed when the component unmounts.

‍

React Server Components

Server Components are a transformative feature that allows rendering components on the server, reducing the JavaScript bundle size sent to the client and improving initial load times, the HTML served to the user is fully populated with actual content on the first render, and there is no need to fetch additional data or render a second time. They also enhance SEO by pre-rendering content, making it more accessible to search engines.

Improved Error Handling and Hydration Errors

React 19 enhances error handling by eliminating duplicate error logs and providing more informative hydration error messages. This improvement simplifies debugging and ensures clearer communication of issues during development and production.

React 18 duplicated some error logs:

On this example, React 19 shows a consolidated hydration error message with further details:

Context as a Provider

React 19 allows the use of <Context> directly as a provider, removing the necessity for <Context.Provider>. This change streamlines context usage and enhances readability.

In React 18 we had to use <Context.Provider>:

In React 19 we can use <Context> directly

This Reduces boilerplate by eliminating the .Provider suffix. Also this simplifies the syntax for context providers, making codebases more consistent.

‍

Document Metadata Support

React 19 natively supports rendering document metadata tags like <title>, <link>, and <meta> within components. This integration ensures that metadata is correctly hoisted to the <head> section, enhancing SEO and compatibility with client-only apps and Server Components.

This is an example rendering metadata tags on React 19:

On React 18 we had to use third-party libraries as React Helmet to achieve the same result:

Custom Elements Support

React 19 offers full support for Custom Elements passing all tests on Custom Elements Everywhere, aligning with the Web Components specification. This improvement allows developers to define and use custom HTML elements seamlessly, treating props as properties when appropriate, and ensuring compatibility across server and client rendering.

Conclusion

React 19 marks a significant milestone in the framework's evolution, introducing powerful new features like Actions, Server Components, and enhanced hooks that collectively elevate the developer and user experience. By addressing the modern needs of web development (such as improved performance, maintainability, and SEO) React 19 ensures that developers have the tools necessary to build next-generation applications. Upgrading to React 19 may involve navigating some breaking changes and updating your codebase, but with the comprehensive upgrade guide and automated codemods provided by the React team, the transition is designed to be as smooth as possible. Embrace React 19 to stay at the forefront of web development, delivering fast, efficient, and scalable applications that meet the highest standards of performance and user experience.

‍