React 19 — New Features ️‍🔥

#react #news #webdev #javascript

Here we go, another New features in (library) post 🙄
I've made so many posts like this lately, but there's been so many updates!

React 19 RC (release candidate) was released in April 2024, and it's finally stable! In this post, I'll discuss some of the latest additions.

Let's get started!

New hook: `useFormStatus`

This new hook is awesome. Let's say you have a form component, and several components nested in the form (for example, buttons and checkboxes).
In previous versions of React, if you wanted to disable checkboxes while the form was pending (right after the user submitted it), you would have to create a custom context, or pass props (e.g., a disabled prop) to your components that were children of the form. Now, with React 19, you can just use a useFormStatus hook:

import { useFormStatus } from 'react-dom';

function SubmitButton() {
  const { pending } = useFormStatus();
  return <button type="submit" disabled={pending} />
}

The useFormStatus hook will automatically detect that your component is in a form and return the value you need. To see what else you can do with it, check out the docs.

useFormStatus Hook Docs

New option for `useDeferredValue`

If you don't already know what useDeferredValue is, you're missing out! The hook allows you show stale data while new data is loading. In React 19, the hook is getting a new option: initialValue. Let's look at an example (taken from the react.dev changelog):

function Search({deferredValue}) {
  // On initial render the value is ''.
  // Then a re-render is scheduled with the deferredValue.
  const value = useDeferredValue(deferredValue, '');

  return (
    <Results query={value} />
  );
}

When initialValue is provided, useDeferredValue will return it as value for the initial render of the component, and schedules a re-render in the background with the deferredValue returned.

This is very useful for pages like search or filtering pages. To learn more, go to the docs below.

Document Metadata Hoisting

This isn't a super crazy update, but it's very useful!
Document metadata in your components will now automatically be hoisted to the <head> element of the document.

For example:

function BlogPost({post}) {
  return (
    <article>
      <h1>{post.title}</h1>
      <title>{post.title}</title>
      <meta name="author" content="BestCodes" />
      <link rel="author" href="https://x.com/the_best_codes/" />
      <meta name="keywords" content={post.keywords} />
      <p>
        Testing, one two three...
      </p>
    </article>
  );
}

When React renders this component, it will see the <title>, <link>, and <meta> tags and automatically hoist them to the <head> section of the document. By supporting these metadata tags natively, React 19 ensures they will work with client-only apps, streaming SSR, and Server Components.

This is not intended to replace a metadata library, but it will make doing metadata in React a lot easier.

`ref` as a prop, `ref`, cleanup

In React 19, you can now access ref as a prop for function components instead of having to do all the complicated stuff with forwardRef.

You can also define cleanup functions for refs now. See the below example:

<input
  ref={(ref) => {
    // ref created

    // NEW: return a cleanup function to reset
    // the ref when element is removed from DOM.
    return () => {
      // ref cleanup
    };
  }}
/>