React useActionState Hook

What is useActionState Hook in React?

useActionState wires a form to an async action function and returns the latest result, the action to attach to the form, and a pending flag. It replaces the manual loading and error state most form submissions need.

Why useActionState Hook matters

Every form repeats the same three pieces of state: submitting, error, result. This hook packages them and works with progressive enhancement in server-rendered frameworks.

useActionState Hook example

const [state, formAction, isPending] = useActionState(
  async (prevState, formData) => {
    const res = await applyToJob(formData.get('jobId'));
    if (!res.ok) return { error: 'Could not submit. Try again.' };
    return { success: true };
  },
  { }
);

<form action={formAction}>
  <input type="hidden" name="jobId" value={job.id} />
  <button disabled={isPending}>{isPending ? 'Applying…' : 'Apply now'}</button>
  {state.error && <p className="err">{state.error}</p>}
</form>

Key points to remember

• React 19. The action receives the previous state and the FormData.
• The form works without JavaScript when used with a server framework.
• useFormStatus reads pending state from a nested child component.

Common mistakes with useActionState Hook

• Returning undefined from the action, which wipes the state object.
• Expecting it in React 18 — it does not exist there.