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={(e) => setName(e.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}

In React 19, the useTransition hook helps to handle asynchronous requests without manually tracking the pending state.

Example with Actions in React 19:

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={(e) => setName(e.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}

2. Optimistic Updates: Instant Feedback for Users

React v19 introduces a better way to handle optimistic updates. With the new useOptimistic hook, developers can show instant feedback to users while the data is still being processed.

This is especially useful for actions like form submissions, where you can instantly show success or failure messages, even before the server responds.

Improvements in React 19

Aside from Actions, React v19 brings several other performance and usability improvements. Let’s go over some of them.

1. Suspense Enhancements: Pre-warming Suspended Trees

Suspense is one of the most powerful features in React, allowing developers to handle asynchronous data fetching in a more declarative way. With React 19, we now have enhancements in Suspense that improve how React prepares components during loading states.

The addition of pre-warming for suspended trees means React can now preload certain components before they’re needed, improving load time and performance.

2. New React DOM Static APIs

React 19 introduces new static APIs for the React DOM, which makes it easier to create static, server-rendered React applications. These improvements help with performance optimizations on the server-side, reducing the time to first render for static pages.

How to Upgrade to React 19

Upgrading to React v19 is simple, thanks to the clear and comprehensive Upgrade Guide provided by the React team. Here’s a quick rundown on how you can get started:

1. Check Compatibility

Before jumping into the upgrade process, ensure that all your dependencies are compatible with React 19. This includes third-party libraries, components, and any custom configurations you may have.

2. Install React 19 via npm

To install React 19, simply run the following command:

npm install react@19 react-dom@19

If you’re using Yarn, run:

yarn add react@19 react-dom@19