How does useFormStatus determine whether a form submission is pending?

Direct answer

useFormStatus reads submission status from the nearest parent form, so the component calling it must be rendered inside that form rather than in the same component that creates the form element.

SettingsForm.jsx

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

  return (
    <button type="submit" disabled={pending}>
      {pending ? "Saving…" : "Save"}
    </button>
  );
}

function SettingsForm({ action }) {
  return (
    <form action={action}>
      <input name="displayName" />
      <SubmitButton />
    </form>
  );
}

The status object can expose pending, submitted data, the form method, and the active action.