useFormStatus in Next.js

useFormStatus is a React hook that tracks the status of a server form submission. It lets you show loading states without manual state management.

What is useFormStatus?

It tells your UI when a form is being submitted to a server action.

How does it work?

const { pending } = useFormStatus();

The pending state becomes true while the server action is running.

Example — Loading Button

Why use it?

• Automatic loading indicators
• No manual state tracking
• Cleaner server form UX

Real-World Example

A checkout form disables the submit button while payment is processing.

Interview Tip

useFormStatus provides real-time form submission status for server actions, improving UX without extra state logic.