Exploring Features of React 19 RC

In April 2024, the React Core Team released the React 19 RC version. This means we are very close to a stable release and can already start testing some new features. This blog post aims to explore some of the new functionalities of this version and demonstrate how they can be applied in code.

New use() API

React 19 introduced the new use() API, which provides a simpler way to handle promises directly in the rendering of a component. With this API, React can automatically pause rendering until the promise is resolved, activating Suspense in the meantime. This eliminates the need to use the well-known useEffect to handle promise resolution and state updates, making the code cleaner and more straightforward.

Furthermore, the use() method also improves the way to access context values. When you pass a context as a parameter to use(), it returns the current value of that context. This allows you to use these values conditionally, something useContext() cannot directly achieve. This greatly enhances context usage, enabling you to react dynamically to different conditions without additional tricks.

Actions

In React 19, "Actions" make common tasks like form submission and error handling easier by handling pending states and optimistic updates. With the new API, React automatically manages state and errors during asynchronous transitions.

Actions Hooks Action Hooks are hooks used to handle transitions (pending states, error states, optimistic updates) of actions.

useActionState

Before React 19, to manage errors and pending states in forms, it was necessary to use useState to store these values within the component. Now, with the useActionState hook, this process has been simplified. The hook returns a tuple with the error, formAction, and the form state, allowing easy integration into the component.

When used in the onSubmit of a <form>, formAction returns FormData, simplifying data handling before sending it, such as to an API. This reduces the need for repetitive and manual coding.

useFormStatus

The useFormStatus hook is used to monitor the submission status of a form, especially when it is pending. It can be applied to any component within the form and is often used to disable the submit button while the form is being processed. This improves usability by ensuring the user knows the action is in progress and prevents multiple submissions while processing is active.

useOptimistic

The useOptimistic hook allows the user interface to be updated optimistically, displaying changes before they are confirmed by the backend. For example, when sending a message, the interface can instantly reflect this change without waiting for the server's final response. This enhances the user experience by making interactions faster and smoother, while the system handles the backend confirmation in the background.

New way to pass refs

Previously, passing refs via component props required using forwardRef, which complicates the process. With React 19, it is now possible to pass refs directly through props, making this functionality as simple as passing any other prop.

This eliminates the need for complex solutions and makes the code cleaner and more intuitive, especially when working with components that require direct access to DOM references.

Conclusion

React 19 RC brings new features that make development smoother and address issues present in previous versions. It is worth exploring what this version has to offer and preparing your projects for the upcoming stable release of React.