React 19.0: What's New, Release History & Support Lifecycle

useActionState Hook

This new hook manages async actions in forms. It tracks the latest result, provides a submit function, and shows if the action is pending. It handles errors and resets automatically.

const [error, submitAction, isPending] = useActionState(
  async (state, formData) => {
    const newName = formData.get('name');
    const result = await updateName(newName);
    if (result.error) return result.error;
    return null;
  },
  null
);

Form Actions

Forms can now use functions directly as the action prop. React handles submission, pending states, and resets on success.

<form action={submitAction}>
  <input name="name" />
  <button type="submit" disabled={isPending}>Update</button>
</form>

useFormStatus Hook

Read the status of a form from any child component without passing props down. It shows if the form is pending.

import { useFormStatus } from 'react-dom';

function Button() {
  const { pending } = useFormStatus();
  return <button disabled={pending}>Submit</button>;
}

useOptimistic Hook

Update the UI right away for better user feel, then sync with the server. It reverts changes if something goes wrong.

const [optimisticValue, addOptimistic] = useOptimistic(
  messages,
  (state, newMessage) => [...state, newMessage]
);

const action = useActionState(
  async (_, formData) => {
    const message = formData.get('message');
    addOptimistic({ text: message });
    const result = await submitMessage(message);
    return result;
  },
  null
);

use Hook

Load promises or context values during render. The component pauses until the data is ready.

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

Server Components

Now stable, these run only on the server to fetch data without sending extra code to the browser.

Server Actions

Mark functions with "use server" to run them on the server from client code. They work seamlessly with forms.

"use server";
export async function createPost(formData) {
  // Server-side logic
}

Static APIs

New tools in react-dom/static for generating static HTML that waits for data before finishing.

import { prerender } from 'react-dom/static';

const { prelude, chunks } = await prerender(
  <App />,
  { bootstrapScripts: ['/client.js'] }
);

Ref as Prop

Pass refs directly to function components like regular props. No more need for forwardRef in many cases.

function MyComponent({ ref, ...props }) {
  return <div {...props} ref={ref} />;
}

<MyComponent ref={myRef} />;

Context as Provider

Use the context object directly as a provider element for simpler code.

const ThemeContext = createContext();

<ThemeContext value={theme}>
  <App />
</ThemeContext>;

Better Hydration Errors

Error messages now show clear diffs between server and client output to help fix mismatches quickly.

Ref Cleanup

Ref callbacks can return functions that run on unmount for cleaning up resources.

<input
  ref={(node) => {
    if (node) setup(node);
    return () => cleanup(node);
  }}
/>

Metadata Support

Add title, meta, and link tags right in your components. React moves them to the head automatically.

function Page({ title }) {
  return (
    <>
      <title>{title}</title>
      <meta name="description" content="..." />
      <h1>{title}</h1>
    </>
  );
}

Stylesheet and Async Script Support

Render link and script tags in components. React handles loading order, deduplication, and Suspense integration.

<link
  rel="stylesheet"
  href="styles.css"
  precedence="default"
/>

<script async src="analytics.js" />

Preloading APIs

New functions to preload DNS, connect to origins, or init resources early for better speed.

import { preload, preconnect } from 'react-dom';

preload('/image.jpg', { as: 'image' });
preconnect('https://api.example.com');