hardFrontend

What does the `useActionState` hook do in React 19?

Q: What does the `useActionState` hook do in React 19?

**Core concept (TL;DR).** useActionState manages the state of a **form Action**. You pass an async action function and an initial state; it returns [state, formAction, isPending] . Wire formAction to a <form action={…}> , and React tracks the **pending** status and the action's **returned result** for you — no manual loading/error state. [state, formAction, isPending] = useActionState(fn, init) <text x="95" y="72" fill="#06b6d4" font-size="9.5" font-weight="700"

946 views

Understand the problem

Managing form-action state, result, and pending status in one hook.

reactreact-19hooksforms

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

Form with useActionState (pending + result)

Run Playground

import { useActionState } from 'react';

// Pretend this calls your backend.
function fakeUpdate(name) {
  return new Promise((resolve) =>
    setTimeout(() => resolve(name.trim() ? 'Saved: ' + name : 'Name is required'), 800),
  );
}

export default function App() {
  const [message, submitAction, isPending] = useActionState(
    async (prev, formData) => await fakeUpdate(formData.get('name')),
    'No changes yet',
  );
  return (
    <div style={{ fontFamily: 'sans-serif', padding: 24 }}>
      <form action={submitAction}>
        <input name="name" placeholder="Your name" />
        <button disabled={isPending}>{isPending ? 'Saving…' : 'Save'}</button>
      </form>
      <p>{message}</p>
    </div>
  );
}

Join the discussion

Discussion (0)

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

What are Effect Events (`useEffectEvent`) and what problem do they solve?

What problem does `useSyncExternalStore` solve?