React 19: Actions, the use API and Server Components

React 19 became stable in December 2024. Its theme is removing code you used to write by hand: loading flags, error state, optimistic updates and wrappers such as forwardRef. This summary covers the changes that affect everyday work.

One correction to a common mix-up first: concurrent rendering arrived in React 18. React 19 builds on it.

Actions: async work without the boilerplate

Submitting a form used to need three pieces of state: the data, a pending flag and an error. React 19 lets you pass an async function straight to a form, and tracks the rest.

import { useActionState } from "react";

function NewsletterForm() {
  const [error, submit, isPending] = useActionState(async (previous, formData) => {
    const result = await subscribe(formData.get("email"));
    return result.ok ? null : result.message;
  }, null);

  return (
    <form action={submit}>
      <input type="email" name="email" required />
      <button disabled={isPending}>{isPending ? "Saving…" : "Subscribe"}</button>
      {error && <p role="alert">{error}</p>}
    </form>
  );
}

Three hooks work together here:

The use API

use reads a promise or a context during render. Unlike hooks, it can be called inside a condition or a loop.

function Comments({ commentsPromise }) {
  const comments = use(commentsPromise); // suspends until the data arrives
  return comments.map((c) => <p key={c.id}>{c.text}</p>);
}

Wrapped in <Suspense>, this replaces a good deal of useEffect data fetching.

Server Components and Server Functions

Server Components are stable in React 19. They render on the server and send no JavaScript of their own to the browser, which is what keeps large pages light. A component can read from a database directly, and only the interactive parts become client code.

Server Functions let a client component call a function that runs on the server, without you writing an API route for it. Both features need a framework that supports them, such as Next.js.

Smaller changes that add up

• ref is a normal prop. Function components no longer need forwardRef.
• Document metadata. <title>, <meta> and <link> tags rendered inside a component are moved to the document head.
• Better hydration errors. A mismatch now shows a diff instead of a vague warning.
• Custom elements. Web components work with props as expected.

Should you upgrade?

For most apps, yes. The React team published an upgrade guide and codemods that handle the mechanical changes. Move to the latest 18 release first, clear the warnings, then go to 19.

Automatic memoization is a separate tool. See React Compiler: memoization without useMemo.