useFormStatus

公式ドキュメント ↗

// フォームを描画する側: pendingという概念を一切知らない
function BasicForm() {
  return (
    <form action={fakeAction}>
      <input name="text" />
      <SubmitButton />
    </form>
  );
}

// フォームの子コンポーネント: ここで初めてuseFormStatusが効く
function SubmitButton() {
  const { pending } = useFormStatus();
  return <button disabled={pending}>{pending ? "送信中…" : "送信する"}</button>;
}

同じボタンを、どのフォームにも置ける

同じSubmitButtonを、まったく別の2つのフォームにそのまま置いている。propsを何も渡していないのに、それぞれ自分が属するフォームの状態だけを正しく反映する。デザインシステムの共通部品として配りやすい。

注意点: フォームの中でしか使えない

// ❌ 効かない例: フォームを描画している本人がuseFormStatusを呼んでいる
function BrokenForm() {
  const { pending } = useFormStatus(); // 近くに<form>がまだ存在しないので常にpending: false
  return (
    <form action={fakeAction}>
      <button disabled={pending}>送信する</button>
    </form>
  );
}

// ✅ 効く例: <form>の「子」として描画される別コンポーネントの中で呼ぶ
function WorkingForm() {
  return (
    <form action={fakeAction}>
      <SubmitButton /> {/* この中でuseFormStatusを呼ぶ */}
    </form>
  );
}

useFormStatusは「近くにある<form>」を探して状態を返す仕組み。フォームを描画している本人の中で呼んでも動かない。呼ぶコンポーネントは必ず<form>の内側(子や孫)に置く。