What’s new in React 19 Beta

Actions

useTransition

The async transition will immediately set the isPending state to true, make the async request(s), and switch isPending to false after any transitions. This allows you to keep the current UI responsive and interactive while the data is changing.

By convention, functions that use async transitions are called actions. Below is the example snippet :

import { useTransition } from "react";

const App = () => {
  const [isPending, startTransition] = useTransition();
  
  const handleClick = () => {
    startTransition(async () => {
      const response = await fetch('<API_URL>');
      const data = await response.json();
      console.log("transition started", data);
    });
  }

  return (
    <>
      <div>Home Page</div>
      <button onClick={handleClick} disabled={isPending}>{isPending ? "loading" : "Click here"}</button>
    </>
  )
}

export default App;

New Hooks

useActionState

It is a Hook that allows you to update state based on the result of a form action. It allows to handle common cases for Actions.
Below is the example snippet :

import { useActionState } from "react";

async function increment(previousState, formData) {
  return previousState + 1;
}

const Example2 = () => {
  const [counter, formAction, isPending] = useActionState(increment, 0);

  return (
    <form>
      {counter}
      <button formAction={formAction} disabled={isPending}>{isPending ? "loading" : "Increment"}</button>
    </form>
  );
};

export default Example2;

useFormStatus

useFormStatus is a Hook that gives you status information of the last form submission. It will only return status information for a parent <form>

import CustomButton from "./CustomButton";

const Example = () => {

    const submitForm = (event) => {
        console.log("form submitted");
    }

    return (
        <>
            <h1>Example for useFormStatus</h1>
            <form action={submitForm}>
                <CustomButton />
            </form>
        </>
    )
}

export default Example;

import { useFormStatus } from "react-dom";

const CustomButton = () => {
  const { pending } = useFormStatus();

  return (
    <button type="submit">
      {pending ? "Submitting..." : "Click here"}
    </button>
  );
};

export default CustomButton;

useOptimistic

The useOptimistic Hook provides a way to optimistically update the user interface before a background operation, like a network request, completes. In the context of forms, this technique helps to make apps feel more responsive.

New API

use

Using this api, we can read a promise with use, and React will Suspend until the promise resolves:

use API

[1]: React Team. “What’s New in React 19.” *React Official Blog*, April 25, 2024. https://react.dev/blog/2024/04/25/react-19

[2]: React Logo. *React — Open Source Projects*, Facebook Open Source. https://opensource.fb.com/projects/react/.