React 19 Form States: Mastering useActionState, useFormStatus, and useTransition

Managing form lifecycles in single-page applications has historically been a source of significant boilerplate. Developers had to maintain separate hooks for loading indicators, validation errors, and submission status.

With React 19 and Next.js 15/16, the library introduces a new set of hooks that align form transitions directly with asynchronous execution boundaries: useActionState, useFormStatus, and useTransition.

In this chapter, we explore how to build modern, non-blocking interfaces using these native APIs.

1. Capturing Response & Pending State: useActionState

In React 18, input validation errors and response payloads were managed using standard state variables. React 19 introduces useActionState (which succeeds the experimental useFormState hook) to consolidate response state and pending transitions into a unified hook.

The Hook Signature

const [state, formAction, isPending] = useActionState(
  actionFn,
  initialState
);

• actionFn: The asynchronous handler (usually a Server Action) invoked when the form is submitted. It receives the previous state and the form data: async (prevState, formData) => nextState.
• state: The active response payload returned by the action function.
• formAction: The execution wrapper passed directly to the <form action={formAction}> property.
• isPending: A boolean indicator denoting whether the action is currently executing on the server.

Implementation Blueprint

Here is a login form implementation that validates inputs via Zod on the server and displays errors using useActionState:

// app/login/page.tsx
"use client";

import { useActionState } from "react";
import { loginAction } from "./actions";

const initialState = {
  success: false,
  errors: {} as Record<string, string[]>,
};

export default function LoginForm() {
  const [state, formAction, isPending] = useActionState(
    loginAction,
    initialState
  );

  return (
    <form action={formAction} class="form-container">
      <div class="form-group">
        <label htmlFor="email">Email Address</label>
        <input type="email" id="email" name="email" required />
        {state.errors.email && (
          <p class="error-msg">{state.errors.email[0]}</p>
        )}
      </div>

      <div class="form-group">
        <label htmlFor="password">Password</label>
        <input type="password" id="password" name="password" required />
        {state.errors.password && (
          <p class="error-msg">{state.errors.password[0]}</p>
        )}
      </div>

      <button type="submit" disabled={isPending}>
        {isPending ? "Authenticating..." : "Log In"}
      </button>
    </form>
  );
}

// app/login/actions.ts
"use server";

import { z } from "zod";

const loginSchema = z.object({
  email: z.string().email("Invalid email address"),
  password: z.string().min(8, "Password must be at least 8 characters"),
});

export async function loginAction(prevState: any, formData: FormData) {
  const email = formData.get("email");
  const password = formData.get("password");

  const validation = loginSchema.safeParse({ email, password });

  if (!validation.success) {
    return {
      success: false,
      errors: validation.error.flatten().fieldErrors,
    };
  }

  // Execute database lookup or remote auth call
  return {
    success: true,
    errors: {},
  };
}

2. Decoupled Form Context: useFormStatus

Often, the submit button is nested deep inside a form layout (such as within a Card header or a footer toolbar component). Passing loading states down through props introduces heavy boilerplate.

React 19 resolves this with useFormStatus, which functions similarly to a context consumer, reading the status of the parent <form> container.

The Hook Signature

const { pending, data, method, action } = useFormStatus();

• pending: Boolean indicating if the parent form is executing.
• data: The FormData object currently being submitted.
• method: The HTTP method (GET or POST).
• action: Reference to the action function executing.

Critical Rule

Reusable Submit Button Example

// components/submit-button.tsx
"use client";

import { useFormStatus } from "react-dom";

export function SubmitButton({ label }: { label: string }) {
  const { pending } = useFormStatus();

  return (
    <button type="submit" disabled={pending} class="btn-submit">
      {pending ? (
        <>
          <i class="fa-solid fa-spinner fa-spin"></i> Submitting...
        </>
      ) : (
        label
      )}
    </button>
  );
}

This component can then be cleanly embedded inside any form:

<form action={formAction}>
  <input name="username" />
  <SubmitButton label="Create Account" />
</form>

3. Programmatic Transitions: useTransition

What if you are mutating server-side state but not using a <form> element? For example, when toggling a switch, clicking a bookmark button, or deleting an item from a list.

In these cases, React 19 provides useTransition to wrap asynchronous state mutations, signaling to the rendering engine that the UI should remain responsive while the server processes the change.

Implementation Blueprint

// components/delete-item-button.tsx
"use client";

import { useTransition } from "react";
import { deleteItemAction } from "./actions";

export function DeleteButton({ id }: { id: string }) {
  const [isPending, startTransition] = useTransition();

  const handleDelete = () => {
    startTransition(async () => {
      // Execute the asynchronous server mutation
      const response = await deleteItemAction(id);
      if (!response.success) {
        alert("Failed to delete item.");
      }
    });
  };

  return (
    <button onClick={handleDelete} disabled={isPending} class="btn-delete">
      {isPending ? "Deleting..." : "Delete Item"}
    </button>
  );
}

Why Use useTransition?

• Non-Blocking UI: While deleteItemAction is executing, the browser tab remains completely responsive. Other clicks or inputs are processed instantly.
• Auto-Batching: React batches any state updates triggered during the transition, preventing janky render layouts.

4. Architectural Summary: Which Hook to Choose?