React 19 is Coming, What’s New?

React 19 will be another milestone release after the introduction of hooks!

The last time React released a version was on June 14, 2022, with the version number being 18.2.0. In the field of front-end development, such a slow pace of updates for a popular technology is indeed rare. This has led to dissatisfaction among some influential figures in the community, which I mentioned in my previous article. Those interested can click to view: Disagreements in the React Community.

Against the backdrop of growing dissatisfaction in the community, news of the new version of React has finally arrived.

The React team has also responded to the criticism of not releasing a new official version for so long: the features previously released to the Canary version, due to their interrelated nature, required the React team to invest a lot of time to ensure they could work together before gradually releasing them to the Stable version.

Indeed, although no official version has been released for nearly two years, the Canary version has seen some significant updates, such as the use, useOptimistic hook, and use client, use server directives. These updates have objectively enriched the React ecosystem, especially promoting the rapid development of full-stack frameworks such as Next.js and Remix.

The React team has confirmed that the next version will be a major release, with the version number being 19.0.0.

Predicting New Features in v19
Now, let’s take an early look at the new features that might be officially released in version 19, based on the latest news from the React team.

Automatic Memoization
Do you remember React Forget introduced by Huang Xuan at React Conf 2021?

Now, it’s here.

It’s a compiler that has already been applied in Instagram’s production environment. The React team plans to apply it on more platforms within Meta and will make it open source in the future.

Before using the new compiler, we used useMemo, useCallback, and memo to manually cache states to reduce unnecessary re-renders. Although this implementation is feasible, the React team believes it’s not the ideal way they envision. They have been looking for a solution that allows React to automatically and only re-render the necessary parts when state changes. After years of effort, the new compiler has now successfully landed.

The new React compiler will be an out-of-the-box feature, representing another paradigm shift for developers. This is the most anticipated feature of v19.

Interestingly, the React team did not mention “React Forget” when introducing the new compiler, which led to a humorous comment from the community: They forget React Forget & forget to mentioned Forget in the Forget section.🤣

Actions
React Actions developed as part of the React team’s exploration of solutions for sending data from the client to the server. This feature allows developers 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 be synchronous or asynchronous. When using actions, React manages the lifecycle of data submission for the developer. We can access the current status and response of form operations through the useFormStatus and useFormState hooks.

Actions can be used in scenarios of client-to-server interaction, such as making database changes (adding, deleting, updating data) and implementing forms (such as login forms, registration forms).

In addition to combining with useFormStatus and useFormState, actions can also be used with useOptimistic and use server. Expanding on this in detail would make for a lengthy discussion, but you can follow me for an upcoming article where I will introduce the detailed usage of actions.

Directives: use client and use server
The use client and use server directives have been available in the Canary version for a while and are finally joining the Stable version in v19.

Previously, there were frequent complaints in the community about Next.js using these two directives in production, accusing Next.js of damaging the React ecosystem and criticizing the React team for allowing Next.js to use unstable features ahead of time. However, this concern is largely unnecessary because these two directives are designed for full-stack frameworks like Next.js and Remix. Ordinary developers using React to develop applications will hardly need them in the short term.

React 19 will be another milestone version following the introduction of hooks. Andrew Clark said the new version would be released in May or June. Let’s wait and see!

I hope you liked the article! ❤️

Connect with me: LinkedIn.

Explore my YouTube Channel! If you find it useful.

Please give my GitHub Projects a star ⭐️

Happy Coding! 🚀
Thanks for 22098! 🤗