สถานะรอดำเนินการและกำลังโหลดด้วย useFormStatus

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.

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.

The most important rule: useFormStatus must be called from a component rendered inside the <form>, not from the component that renders the <form> itself.

It reads the status of its parent form, so if you call it in the same component that contains the <form> tag, it has no parent form to track and pending stays false forever.

The standard pattern is to extract a small SubmitButton client component and place it between the form tags.

Create a dedicated client component for the submit button. Because it uses a hook, it needs the "use client" directive.

• Read pending from useFormStatus().
• Bind it to the button's disabled attribute.
• Swap the label based on pending.

Now render the SubmitButton inside a form whose action is a Server Action. The button automatically knows about the parent form's status — no props need to be passed down.

The parent form can stay a Server Component; only the button is a client component.

The pending flag becomes true the moment the form is submitted and flips back to false when the Server Action resolves. Here is a typical action that takes time (DB write + revalidation).

Mark the file with "use server" so each exported function is callable as a Server Action.

Beyond a label swap, you often want a visual spinner. Conditionally render a spinner element when pending is true and keep the button disabled.

• Keep the button disabled so it cannot be clicked again.
• Use aria-disabled or visually hidden text for accessibility.

useFormStatus isn't limited to buttons. Any child component inside the form can read pending and react to it. A common pattern is disabling inputs while submitting so the user can't edit data mid-flight.

Just remember each such component must be a client component placed inside the form.

The data field exposes the in-flight FormData. This lets you show an optimistic preview of what is being saved — for example echoing the title while the request runs.

Guard for null: data is only populated while pending is true.

Two hooks track pending UI, but they solve different problems:

• useFormStatus — purpose-built for forms; reads the nearest parent <form>'s status. No state to manage, but the component must live inside the form.
• useTransition — general-purpose; you call the action inside startTransition and read isPending. Works for buttons not wrapped in a form (e.g. a delete button calling an action via onClick).

For declarative <form action={...}> submissions, prefer useFormStatus.

Here is a framework-free way to think about what useFormStatus returns. We model the status shape and a tiny state machine that mirrors how pending flips during a submission.

This runs in any TypeScript judge — no React or server needed.

You learned how to give forms responsive feedback with useFormStatus:

• Import it from react-dom and read pending (plus data, method, action).
• Always call it inside a child rendered within the <form> — typically a "use client" SubmitButton.
• Bind pending to disabled and swap labels or show a spinner to prevent double submissions.
• The parent form can stay a Server Component; only the interactive child is a client component.
• For actions not wrapped in a <form>, reach for useTransition instead.