0PricingLogin▼
Next.js 15 Fullstack (App Router + Server Actions) · Lesson

Pending and Loading States with useFormStatus

Disable buttons and show spinners during submission using the useFormStatus hook inside form children.

Why Pending States Matter

When a user submits a form backed by a Server Action, there is a network round-trip while the action runs on the server. Without feedback the user may click Submit twice, creating duplicate records.

  • Disable the submit button while the action is in flight.
  • Show a spinner or Saving... label so the UI feels responsive.
  • Prevent double submissions automatically.

Next.js 15 (built on React 19) gives us a dedicated hook for exactly this: useFormStatus.

Meet useFormStatus

useFormStatus is a React hook imported from react-dom. It reports the status of the nearest parent <form> element.

It returns an object with these fields:

  • pending — true while the form is submitting.
  • data — the FormData being sent.
  • method — the HTTP method (get or post).
  • action — the function or URL passed to the form's action prop.

For loading UX, pending is the field you will reach for most.

import { useFormStatus } from "react-dom";

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

All lessons in this course

  1. Progressive Enhancement with the form Action Prop
  2. Pending and Loading States with useFormStatus
  3. Field-Level Validation Errors with useActionState
  4. Instant Feedback Using useOptimistic
← Back to Next.js 15 Fullstack (App Router + Server Actions)