What's New in React 19: Actions, use() and More

React 19 is mostly about making async work, especially forms and data mutations, simpler. Here are the features you'll use most, with short examples.

Actions

An Action is an async function used in a transition. React tracks its pending state, errors and optimistic updates for you. Forms accept a function as their action:

function NewsletterForm() {
  async function subscribe(formData) {
    await api.subscribe(formData.get('email'));
  }
  return (
    <form action={subscribe}>
      <input name="email" type="email" required />
      <button>Subscribe</button>
    </form>
  );
}

New hooks

• useActionState - state that updates from an action's result, plus a pending flag.
• useFormStatus - read the parent form's pending state from a child component (from react-dom).
• useOptimistic - show the expected result immediately while the request runs.
• use - read a promise or context; unlike other hooks it can be called conditionally.

ref is just a prop

// No more forwardRef for function components
function TextInput({ ref, ...props }) {
  return <input ref={ref} {...props} />;
}

Context as a provider

const ThemeContext = createContext('light');

<ThemeContext value="dark">   {/* instead of <ThemeContext.Provider> */}
  <App />
</ThemeContext>

Document metadata in components

function BlogPost({ post }) {
  return (
    <article>
      <title>{post.title}</title>
      <meta name="description" content={post.summary} />
      <h1>{post.title}</h1>
    </article>
  );
}

React hoists <title>, <meta> and <link> tags into the document <head>.

Other improvements

• Ref callbacks can return a cleanup function.
• Better hydration error messages that show a diff of what didn't match.
• Stylesheet and script support with precedence and de-duplication.
• Later 19.x releases added <Activity> for keeping hidden UI alive and useEffectEvent for reading the latest values inside effects.