useActionState in React

From the React Design Patterns cheat sheet · React 19 Actions & Forms · verified Jul 2026

useActionState

Manage form state, errors, and pending status with a single hook

jsx

const [state, formAction, isPending] = useActionState(
  async (prevState, formData) => {
    const result = await updateUser(formData.get('name'));
    return result.error ? result : { success: true };
  },
  null
);

return (
  <form action={formAction}>
    <input name="name" />
    <button disabled={isPending}>Save</button>
    {state?.error && <p>{state.error}</p>}
  </form>
);

💡 useActionState replaces the old useState dance for form loading + error handling

⚡ The action receives previousState and formData - return any state shape you need

📌 Forms work without JavaScript when paired with server actions - true progressive enhancement

🟢 Use defaultValue (not value) so the form is uncontrolled and works with form data

useActionStateformsreact-19

More React tasks

Back to the full React Design Patterns cheat sheet