Form Actions with useActionState and useFormStatus

React 19 lets you pass a function to <form action={fn}>. useActionState wraps an action, giving you the latest result (e.g., errors) and an isPending flag; useFormStatus lets a child (like a submit button) read the parent form's pending state; useOptimistic shows optimistic UI while the action runs. Forms are reset automatically after successful actions. In frameworks with Server Functions, the same action can run on the server.

import { useActionState } from "react";
import { useFormStatus } from "react-dom";

type Result = { error?: string; ok?: boolean };

async function subscribe(_prev: Result, formData: FormData): Promise<Result> {
  const email = String(formData.get("email") ?? "");
  if (!email.includes("@")) return { error: "Enter a valid email" };
  const res = await fetch("/api/subscribe", { method: "POST", body: JSON.stringify({ email }) });
  return res.ok ? { ok: true } : { error: "Something went wrong" };
}

function SubmitButton() {
  const { pending } = useFormStatus();
  return <button disabled={pending}>{pending ? "Subscribing…" : "Subscribe"}</button>;
}

export function Newsletter() {
  const [state, formAction] = useActionState(subscribe, {});
  return (
    <form action={formAction}>
      <input name="email" type="email" aria-describedby="email-error" />
      <SubmitButton />
      {state.error && <p id="email-error" role="alert">{state.error}</p>}
      {state.ok && <p role="status">Thanks for subscribing!</p>}
    </form>
  );
}

Common pitfalls

• Calling useFormStatus in the same component that renders the <form> — it only works in children.
• Forgetting that action functions receive (previousState, formData) with useActionState.
• Relying on client-side validation alone.

Key points

• <form action> accepts functions in React 19
• useActionState: result + pending
• useFormStatus in child components

Further reading: react.dev: useActionState