What is `useFormStatus` in React 19, and why does it exist?

import { useFormStatus } from 'react-dom';

function SubmitButton() {
  const { pending } = useFormStatus();   // status of the nearest parent <form>
  return <button disabled={pending}>{pending ? 'Submitting…' : 'Submit'}</button>;
}

async function submit(formData) {
  await new Promise((r) => setTimeout(r, 1000));
  alert('Submitted: ' + formData.get('email'));
}

export default function App() {
  return (
    <div style={{ fontFamily: 'sans-serif', padding: 24 }}>
      <form action={submit}>
        <input name="email" placeholder="email@example.com" />
        <SubmitButton />
      </form>
      <p style={{ color: '#666' }}>The button disables itself via useFormStatus() — no props passed down.</p>
    </div>
  );
}