Hook · React 19
useActionState
State from a form action
useActionState connects an async action to local state. It receives the action function and an initial state; it returns the current state, the action ready for use as a form attribute, and an isPending flag.
The signature
const [state, formAction, isPending] = useActionState(fn, initial). The fn receives the previous state and the FormData, and returns the new state — sync or async.
No extra useState
Unlike the classic onSubmit + useState pattern, useActionState centralizes the flow: one place handles logic, state, and pending. Works with and without JS enabled (progressive enhancement).
Common pitfalls
- 01The action receives (prevState, formData) — not just formData. If you forget prevState, the signature is wrong.
- 02useActionState is a react-dom hook. Do not import it from react.
- 03isPending only reflects server actions or async transitions — synchronous actions return false immediately.
Was this helpful?
Sign in to give feedback