What's New In React 19?

React 19 brings a bunch of new features in React. In this post I will tell you what was added and why React is cool again.

For someone who don't know what React is, let's clarify it.

What is React?

React is a popular JavaScript library for building user interfaces, especially for web applications. It allows developers to create reusable UI components, enabling a more efficient and organized way of managing the view layer of an application.

React was developed by Facebook and is maintained by Facebook and a community of individual developers and companies.

React 19 features

Let's breakdown the update into pieces and describe it.

React compiler

React has compiler now which is unusual for React. But it's a common thing in web frameworks now. Svelte has compiler, Astro has it as well.

Developers said:

React Compiler is no longer a research project: the compiler now powers instagram.com in production, and we are working to ship the compiler across additional surfaces at Meta and to prepare the first open source release.

Compiler is a great feature and that's why:

1. No more useMemo, useCallback, and memo. Compiler will automatically apply these when needed.
2. Improved developer experience. It's faster to make React apps now, you don't need to figure out where to put useMemo to improve web app's performance. Also, the code looks cleaner (which I think is the problem of React).

Actions

Actions allow you 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 operate synchronously or asynchronously. You can define them on the client side using standard JavaScript or on the server with the 'use server' directive. When using an action, React will manage the life cycle of the data submission for you, providing hooks like useFormStatus, and useFormState to access the current state and response of the form action.

Server components

Directives: "use client" and "use server" are bundler features designed for full-stack React frameworks. They mark the “split points” between the two environments: "use client" instructs the bundler to generate a <script> tag (like Astro Islands), while "use server" tells the bundler to generate a POST endpoint (like tRPC Mutations). Together, they let you write reusable components that compose client-side interactivity with the related server-side logic.

Document metadata

Developers added built-in support for rendering <title>, <meta>, and metadata <link> tags anywhere in your component tree. These work the same way in all environments, including fully client-side code, SSR, and RSC. This provides built-in support for features pioneered by libraries like React Helmet.

Asset loading

Developers integrated Suspense with the loading lifecycle of resources such as stylesheets, fonts, and scripts so that React takes them into account to determine whether the content in elements like <style>, <link>, and <script> are ready to be displayed. We’ve also added new Resource Loading APIs like preload and preinit to provide greater control for when a resource should load and initialize.

The new features mentioned above are compatible with any environment your app runs in, providing everything needed for production use.

There’s still more to be done to prepare for release. In React 19, developers also adding long-requested improvements which require breaking changes like support for Web Components. Their focus now is to land these changes, prepare for release, finalize docs for new features, and publish announcements for what’s included.

You can read detailed information on official React documentation.

Conclusion

If you have switched from React to Vue, Svelte, or any other js framework, which was popular recently. You might check the React when the major version will be released. Maybe you will like it and continue making web apps in React.

If you are a newbie in web development and looking for your first web framework, you can learn React, but there are a few things you need to consider, but it's a topic for another post.