What’s New in React19?

Recently, React released React19 Beta. It includes some exciting changes, updates, APIs, and hooks. This React 19 update article will cover some significant new hooks we need to understand, as well as reference code and working snapshots.

Contents:

Introduction to React Compiler.
Document Metadata.
Automatic Re-rendering with the inbuilt memo, useMemo, and useCallback hooks.
API handling became more straightforward with the introduction of the use.
Actions: A new feature in React to interact with DOM elements.
forwardRef now becomes ref, and ref is a prop.
use(Context) instead of useContext().

 

This article will focus on the new hooks, updates to existing hooks, and APIs introduced in React 19. Additionally, we’ll publish a separate blog post specifically covering Server-Side Rendering (SSR) in React 19. SSR can be a complex topic for many React developers, especially since React is now integrated with Next.js for server-side rendering. Stay tuned for our detailed overview of SSR and the exciting features of React 19!

React Compiler

The React team has introduced the brand new React Compiler to address one of the pain points in React: re-rendering issues that impact performance. Developers often use useMemo, memo, and useCallback to mitigate these issues manually. However, the React team recognized the limitations of this approach and decided to create the React Compiler. This compiler will handle re-rendering internally, eliminating the need for developers to explicitly implement useMemo, memo, and useCallback.

Currently, the React Compiler is being utilized within Instagram’s codebase.

Document Metadata

In the past, adding metadata such as titles and meta descriptions to React applications was a cumbersome process. Developers often relied on external packages like ‘react-helmet’ to manage this. However, with the release of React 19, this functionality will be built-in, allowing developers to easily add SEO content at the component level.

Snippet

export const Home = () => {
return(
<>
<title>Homepage</title>
<meta name=”description” content=”This is Hompepage for Meta data” />
</>
)
}

use API

Let’s dive into a more detailed explanation of the use( ) hook introduced in React 19.

Purpose and Use Cases

The use() hook is designed to handle edge cases where promises, async operations, or context are involved in React components.
It provides a way to consume custom hooks within specific conditions or blocks of code.
It allows for more flexibility in hook usage.
The use() hook can be used within any block of code, making it easier to handle complex scenarios.

Usage Requirements

The function that calls the use() hook must be a React component or another custom hook.
If a component calling the use() hook is wrapped in a suspense boundary, a fallback message is displayed to the user until the use() hook resolves.
Once the use() Hook resolves, the component automatically renders the resolved data in the UI.

Code Snippet

import { use } from “react”;
const fetchUsers = async () => {
const res = await fetch(‘https://randomuser.me/api/’);
return res.json();
};
const UsersItems = () => {
const users = use (fetchUsers());
return (
<ul>
{users.map((user)=>{
<div key={user.id} className=”bg-blue-50 shadow-md p-4 my-6 rounded-lg”>
<h2 className=”text-xl font-bold”>{user.name}</h2>
<p>{email.email}</p>
</div>
})}
</ul>
)
};
export default UsersItems;

Actions And <form /> in react

React19 is bringing a power feature known as Actions.

In React, when onSubmit() events are called, they are executed on the client side. However, with the use of Action and its different hooks, we can execute the submit event on the server side.
Action can be executed on both client and server side.
With <form /> tag Top of Formin React, a new attribute is added, i.e., actions, so instead of using onSubmit(), use action.
Simplifying Form Handling: Actions make dealing with form submissions easier. You can update your page’s information without complicating it when someone fills out a form.
Keeping It Simple: By integrating actions with the HTML <form> tag, you can replace the traditional onSubmit event with actions. It’s like streamlining your process!
Actions automatically manage Pending states, Error handling, instant feedback, etc.

useOptimistic( ) Hook

The useOptimistic() hook is a powerful tool for managing optimistic updates in React.
It allows you to handle scenarios where you want to display a value to the user before a request is completed, even while it is still in progress.
Imagine a form where a user enters their first name.
Typically, when the form is submitted, you’d show a loader while waiting for the server’s response.
With the useOptimistic() hook, you can immediately display the actual value entered by the user. When the server responds successfully, the displayed value automatically updates to match the server’s response.

useActionState() Hook

useActionState() is another new hook introduced In react19.
Please note that in a canary release, this was called useFormState.
useActionState() allows you to update the existing state based on the response of form action.
useActionState() hooks expect the below arguments:

Submit Action
Initial State of form
Permalink

Submit actions is a function that will be called upon clicking the submit button.
This will hold the initial value of your form.
This will hold the initial value of your form.

This is required
This is required
This is optional

 

forwardRef is not ref

Previously, we were required to use forwardRef to access ref in the child component. But forwardRef is now ref in react19. See the examples below:

Please note that forwardRef will be deprecated and probably removed in future releases.

Context in React19

In react19, context can be rendered with use(Context)

Snippet

const UserContext = createContext();

function Component1() {
const [user, setUser] = useState(“John Doe”);

return (
<UserContext.Provider value={user}>
<h1>{`Hello ${user}!`}</h1>
<Component2 />
</UserContext.Provider>
);
}

function Component2() {
const user = use(UserContext);

return (
<>
<h1>Component 2</h1>
<h2>{`Hello ${user} again!`}</h2>
</>
);
}

Conclusion

Overall, React19 beta released many new hooks and APIs and many new updates to existing APIs; some APIs are depreciated.
The main catch pointers are use() hook, Actions, and hooks with <form />Top of Form, useTransition is now async,
Context has been updated with the provider; thus, no explicit provider is needed.

There is a lot more in the box for server-side rendering and its new server components and Actions, which will be covered in the next blog.

Source: Read More