An interactive React 19 lab that turns the new form action APIs into something you can watch: useActionState, useFormStatus, and the (prevState, formData) => nextState accumulator — with the exact code beside each demo.
▶ Live: https://useactionstate-lab.vercel.app/
React 19 reframed forms as a small state machine. Instead of wiring up a loading boolean, a try/catch, and a result state by hand, you give a <form> an action and React tracks pending, errors, and the returned state for you. This lab shows all three moving parts.
-
useActionState— the state machine. Submit a form; the action validates, awaits a fake API, and returns the next state. Watch the lifecycle strip goidle → submitting → success/error, the state JSON update to the action's return value, and a transition log record everyisPendingflip. No loading boolean anywhere. -
useFormStatus— pending without prop drilling. A<Submit>child and a spinner read the parent form's pending state directly — the form passes them nothing. Includes the one gotcha that trips everyone: the hook only works from a component rendered inside the<form>; call it in the same component that renders the form and you always getpending: false. -
The accumulator.
useActionStateisuseReducerfor forms: the action's first argument is the previous return value, so each submit builds on the last — plus a built-in pending flaguseReducerdoesn't give you.
Everything is the real React 19 API (useActionState from react, useFormStatus from react-dom) running client-side — no server required to see the mechanism.
React 19 · TypeScript · Vite.
npm install
npm run devMIT © 2026 dev48v — dev48v.infy.uk