Next.js 16 Modern Blog

Edit Post

Title

Description

ContentMarkdown supported

# useFormStatus

`useFormStatus` provides the pending state of the nearest parent form. It's the simplest way to show loading indicators during form submissions.

## Example: SubmitButton

From `components/design/SubmitButton.tsx`:

```tsx
'use client';

import { useFormStatus } from 'react-dom';

export function SubmitButton({ children }) {
  const { pending } = useFormStatus();

return (
    <button type="submit" disabled={pending}>
      {pending ? <Spinner /> : children}
    </button>
  );
}
```

## The Child Component Constraint

The hook only works in components that are children of the form:

```tsx
// ❌ Always returns pending: false
function Form() {
  const { pending } = useFormStatus();
  return <form>...</form>;
}

// ✅ Works - SubmitButton is a child of the form
<form action={formAction}>
  <SubmitButton>Save</SubmitButton>
</form>
```

React needs to track which form triggered the submission. By requiring the hook inside a form's children, React reliably determines the pending state for that specific form.

Published

Cancel