jsschools

useFormStatus

Reads the pending status of the parent form submission.

Since React 19 Spec ↗

Syntax

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

Returns

object — Status of the enclosing form: pending, data, method, and action.

Examples

import { useFormStatus } from 'react-dom';

function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" disabled={pending}>
      {pending ? 'Saving...' : 'Save'}
    </button>
  );
}

<form action={save}>
  <SubmitButton />
</form>

Notes

Imported from react-dom, not react. It only reports status for a parent form, so the component calling it must be rendered inside a `<form>`. It returns default values when not within a form submission.

See also