React 19 new features and improvements

date

Jun 22, 2024

slug

react-19

status

Published

React 19 Highlights

New/Extended Features in React 19

React Compiler

Converts React code to regular JavaScript.

Enhances performance by optimizing memoization and re-renders.

Eliminates the need for useMemo, useCallback, and memo.

Server Components

Processes components on the server.

Improves page load speed and SEO.

Reduces client-side JavaScript.

Actions

Simplifies data and interaction management.

Maintains UI responsiveness during state changes.

Document Metadata

Manages document metadata like title and meta tags.

Enhances SEO and user experience.

Asset Loading

Loads assets in the background.

Improves application load time and user experience.

Web Components

Improves compatibility with the Web Components standard.

Enhances frontend development flexibility.

Enhanced/New Hooks

useOptimistic: Updates UI optimistically before server confirmation.

useFormStatus: Manages form field status and validation.

useFormState: Manages form input states efficiently.

use: Fetches and utilizes resources within components or custom hooks.

Actions

React 19 brings some exciting new features, and one of the standout additions is Actions. These are designed to simplify how developers handle tasks like updating data and managing state changes. Before React 19, this often meant lots of manual work—like managing pending states and handling errors. Now, Actions automate much of this process, which makes developing applications smoother and reduces the amount of repetitive code.

Let's take a look at how things used to be done. Imagine you have a form where users update their name:


jsxCopy code
function UpdateName() {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, setIsPending] = useState(false);

  const handleSubmit = async () => {
    setIsPending(true);
    const error = await updateName(name);
    setIsPending(false);
    if (error) {
      setError(error);
      return;
    }
    redirect("/path");
  };

  return (
    <div>
      <input value={name} onChange={(event) => setName(event.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}

In this older method, every aspect—from handling errors to managing the state—required explicit coding.

Now, with React 19's Actions using the useTransition hook, it's much simpler:


jsxCopy code
function UpdateName() {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, startTransition] = useTransition();

  const handleSubmit = () => {
    startTransition(async () => {
      const error = await updateName(name);
      if (error) {
        setError(error);
        return;
      }
      redirect("/path");
    });
  };

  return (
    <div>
      <input value={name} onChange={(event) => setName(event.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}

With useTransition, React now handles the pending state automatically, keeping the user interface responsive even during data updates.

React 19 also introduces useActionState, which simplifies form handling and state management even further. Here’s how you might update a name using a <form> element:


jsxCopy code
function ChangeName({ name, setName }) {
  const [error, submitAction, isPending] = useActionState(
    async (previousState, formData) => {
      const error = await updateName(formData.get("name"));
      if (error) {
        return error;
      }
      redirect("/path");
      return null;
    },
    null,
  );

  return (
    <form action={submitAction}>
      <input type="text" name="name" />
      <button type="submit" disabled={isPending}>Update</button>
      {error && <p>{error}</p>}
    </form>
  );
}

This approach integrates Actions directly into <form> handling, making it easier to manage form submissions and their associated states.

Prince

React 19 new features and improvements

React 19 Highlights

New/Extended Features in React 19

Actions