`useActionState`

Manages state updated by a form action, with pending status.

Since React 19 Spec ↗

Syntax

const [state, formAction, isPending] = useActionState(fn, initialState, permalink?)

Parameters

Name	Type	Required	Description
`fn`	`function`	Yes	The action called with the previous state and form data; returns the next state.
`initialState`	`any`	Yes	The initial state value before the action runs.
`permalink`	`string`	No	URL used for progressive enhancement before hydration.

Returns

array — A triple: current state, a wrapped form action, and a pending boolean.

Examples

async function submit(prevState, formData) {
  const name = formData.get('name');
  return await saveName(name);
}

function Form() {
  const [state, action, isPending] =
    useActionState(submit, null);
  return (
    <form action={action}>
      <input name="name" />
      <button disabled={isPending}>Save</button>
    </form>
  );
}

Notes

Pass the returned action to a form's action prop. The action receives the previous state as its first argument and the form data as the second. Works with progressive enhancement and server actions. Replaced the experimental useFormState name.