hardFrontend

What are Actions in React 19, and how do they change form handling?

Q: What are Actions in React 19, and how do they change form handling?

**Actions** are React 19's first-class way to run async work inside a transition. An async function passed to `startTransition` — or directly to a ` ` — automatically gets managed **pending state, error handling, optimistic updates, and ordering**, so you stop hand-rolling `useState` for loading/error flags. form action runs as a transition — pending/error/reset handled for you submit form <path d="M115,59 H150"

1.1k views

Understand the problem

Async transitions wired into forms with built-in pending, error, and optimistic state.

reactreact-19actionsforms

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Explore the playground snippets

An async Action inside startTransition

Run Playground

import { useState, useTransition } from 'react';

function saveToServer(value) {
  return new Promise((res, rej) =>
    setTimeout(() => (value % 2 === 0 ? res('Saved ' + value) : rej(new Error('Odd numbers rejected'))), 800),
  );
}

export default function App() {
  const [count, setCount] = useState(0);
  const [status, setStatus] = useState('');
  const [isPending, startTransition] = useTransition();

  function save() {
    // An async function inside startTransition IS an Action: pending is tracked.
    startTransition(async () => {
      try { setStatus(await saveToServer(count)); }
      catch (e) { setStatus('Error: ' + e.message); }
    });
  }

  return (
    <div style={{ fontFamily: 'sans-serif', padding: 24 }}>
      <p>Count: {count}</p>
      <button onClick={() => setCount((c) => c + 1)}>+1</button>{' '}
      <button onClick={save} disabled={isPending}>{isPending ? 'Saving…' : 'Save (even only)'}</button>
      <p>{status}</p>
    </div>
  );
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

What causes stale closures in React hooks, and how do you fix them correctly?

What is `useFormStatus` in React 19, and why does it exist?