What are Actions in React 19 and how do they handle form updates?

React 19 extends the transition model to mutations. An action can be an async function passed to a form's action prop or called inside startTransition. React tracks the pending state, keeps the form interactive, and lets you show optimistic or error UI without wiring every flag by hand.

function UpdateName() {
  const [state, formAction, isPending] = useActionState(
    async (previousState, formData) => {
      const result = await saveName(formData.get("name"));

      if (!result.ok) {
        return { ...previousState, error: result.message };
      }

      return { name: String(formData.get("name")), error: null };
    },
    { name: "", error: null },
  );

  return (
    <form action={formAction}>
      <input name="name" defaultValue={state.name} />
      <button disabled={isPending}>Save</button>
      {state.error && <p role="alert">{state.error}</p>}
    </form>
  );
}

The React 19 pieces

• <form action={fn}> submits through an action instead of a manual onSubmit handler
• useActionState returns the latest result, a wrapped action and pending state
• useFormStatus reads the pending state of the nearest parent form
• useOptimistic shows a temporary optimistic result while the server responds

For an uncontrolled form, React resets the form after a successful action submission. Errors can be returned as state and rendered next to the field. If the action is a server action, the function runs on the server and its arguments must be serializable.