useActionState

ELI5 - The Vibe Check

useActionState is React's way of handling I submitted a form, now what, without a pile of useState calls for loading, errors, and results. You hand it an action function and it hands back the latest result plus a pending flag, already wired up to a form. Less plumbing, same form.

Real Talk

useActionState is a React hook that manages the state of a form action, taking an action function and initial state and returning the current state, a wrapped action to pass to a form, and a pending boolean. It replaces the earlier useFormState API and works with both client functions and Server Actions.

Show Me The Code

function ChangeName({ name }) {
  const [state, formAction, pending] = useActionState(
    async (prevState, formData) => {
      const newName = formData.get('name');
      return await updateName(newName);
    },
    { name }
  );

  return (
    <form action={formAction}>
      <input name="name" defaultValue={state.name} />
      <button disabled={pending}>Save</button>
    </form>
  );
}

When You'll Hear This

"useActionState gives us the pending flag for free, so we dropped the isSubmitting state." / "Swap useFormState for useActionState, the newer React version renamed it."