What's New with React in v19 ?

React just got a major update in version 19🚀

But before you get alarmed about how much time it'll take to learn a new version of React, I want to give you some good news.

React 19 is less about the code you have to write and more about the code you don't have to write anymore. Let's take a look at what React code you'll be able to remove in React 19, plus some new features it offers to help you build your React projects faster.

How to use React 19

As of today, React 19 is not yet a stable release. So if your React version is less than 19, you can install a canary version of React to start using these features today.

npm i react@canary react-dom@canary

React Compiler

"React can sometimes be too reactive: it can re-render too much."

Most of the features that are in React 19 are due to the compiler.

So what does it do?

The React compiler will convert your React code into regular JavaScript. The main benefit of this is to improve your overall app performance. But what's even better is that it removes the need for you to think as much about performance. That means you no longer have to use manual memoization tools like useCallback, useMemo, and memo.
These tools were necessary to prevent unnecessary re-renders, but they are hard to use properly, even with React reminding you to use them in the console.

But now, The new compiler optimizes your React code automatically, so you can completely remove any performance hooks you previously had. And it gets even better.

Use() Hook

This hook will read and asynchronously load a resource such as a promise or a context. It can also be used in loops and conditionals, unlike other React hooks.

use() hook can be used to fetch data, therefore, replacing useEffect().

const value = use(resource);

💡 This resource is the source of the data where you want to read the values from, it could be a Promise or a Context.

One great thing about this hook is that it can be called inside of the functions and conditionals unlike the other traditional hooks in React which can only be called at the top level of the component.

Use Client and use Server Directives

React 19 is coming with support for both the use of Client and use Server directives. This is an important aspect as they allow developers to write both client-side and server-side code in the same file. Components will be rendered on the server which makes for better SEO, faster page load times and easy data fetching.

use client
To mark a module as the client code, add "use client" at the top of the file. When a component marked with "use client" is imported by the server component, the compatible bundlers will treat the module import as a boundary between the client and the server code.

'use client';

const ClientComponent = () => {
  return (
    <>
      {/* Other component JSX... */}
    </>
  );
}

use server
Add "use server" at the top of the async functions to mark the function callable by the client, such functions are called Server Actions.

Additionally, we can also add "use server" to the top of the file to mark the entire module as Server Actions which can then be imported in the client code.

const someAsyncFn = async(data) => {
  'use server';
  // Other logic will go here...
}

Actions

Now, actions are a great new feature that makes working with forms a lot easier. Actions are just functions that are called when a form is submitted. These functions are connected to the action prop of any form element. And with React 19, actions can now be executed on the server or client.

New form handling hooks will be:

• useFormStatus() – to access the current status of form operations.

• useFormState() – for a response of form operations.

useOptimistic hook

The useOptimistic hook is yet another hook added to React which works well together with React actions. This hook allows us to optimistically update the UI while a background operation like a network request is being performed.

const [optimisticState, addOptimistic] = useOptimistic(state, updateFn);

Using this hook can make the app feel more responsive, especially when working with forms. For example, when a user types a message into an input box and clicks on the submit button, instead of waiting for the server to respond, the useOptimistic hook will directly show the user message along with a loading indicator, meanwhile, the form will attempt to send the message to the actual server in the background and once the server confirms that the message is received, the loading indicator will be removed.

Document Metadata

The days of using third-party packages for SEO and metadata is coming to an end. The incoming version will have in-built support like titles, descriptions and keywords.

Tags can now be placed anywhere within a component’s JSX and it will work for both client and server components.

No more forwardRef

This feature allows for the passing of a ref through a component to its child and is useful when access is needed to a child DOM element or React component instance from a parent component. forwardRef will no longer be used but instead, ref will be passed as a regular prop.

Asset Loading

Being greeted with unstyled content during page load seems to be a common theme when visiting some websites which isn’t ideal. React 19 will be integrating asset loading with Suspense to ensure assets are ready before display.

Conclusion

So, React 19 brings exciting advancements to the table, focusing more on optimization and convenience. The introduction of the React compiler streamlines performance enhancements, bidding farewell to manual memoization tools. The new use() hook simplifies resource loading and replaces useEffect(), while useClient and useServer directives allow seamless integration of client and server-side code. Actions revolutionize form handling, complemented by new hooks like useOptimistic for UI responsiveness during background operations. Say goodbye to third-party SEO packages as React 19 natively supports document metadata. Additionally, the removal of forwardRef simplifies component communication, and asset loading with Suspense ensures a smoother user experience from the get-go. With these upgrades, React 19 empowers developers to build faster, more efficient, and visually appealing web applications! 🚀

Reference
React19 Blog by React Labs