React useActionState Hook Cheat Sheet

What is `useActionState`?

A hook for managing form-like actions that return new state after an async operation — great for form submissions, validation, etc.

import { useActionState } from "react";

Basic Syntax

const [state, formAction, isPending] = useActionState(async (prevState, formData) => {
  // handle action
  return newState;
}, initialState);

Example: Async Form Submission

const [status, submit, isPending] = useActionState(
  async (prevStatus, formData) => {
    const res = await fetch("/api/submit", {
      method: "POST",
      body: formData
    });
    if (!res.ok) return "Error submitting form";
    return "Form submitted successfully";
  },
  null
);

<form action={submit}>
  <input type="text" name="name" />
  <button disabled={isPending}>Submit</button>
</form>

{status && <p>{status}</p>}