React 19 form actions: useActionState vs useFormStatus vs useOptimistic — which one when?

Short version:

• useActionState(action, initialState) (from react) — wraps an action and gives you [state, formAction, isPending]. Use it when the action returns something you want to render (errors, the saved record). It replaces the canary-era ReactDOM.useFormState.
• useFormStatus() (from react-dom) — read the pending state of the parent <form> from inside a child component, e.g. a reusable submit button. It must be rendered inside the form.
• useOptimistic(state, updateFn) — show the new comment immediately while the action runs; it reverts automatically when the action settles.

For your case:

const [comments, addOptimistic] = useOptimistic(initial, (cur, c: Comment) => [...cur, c]);
const [error, formAction, isPending] = useActionState(async (_prev: string | null, fd: FormData) => {
  addOptimistic({ id: 'tmp', text: String(fd.get('text')) });
  const res = await saveComment(fd);
  return res.ok ? null : res.error;
}, null);

return <form action={formAction}>…</form>;