React useFormStatus — フォーム送信状態を簡単に

useFormStatusによるフォーム状態管理

useFormStatus（react-domから）は親<form>の送信状態を提供します。フォーム送信中のローディング状態を表示する最もシンプルな方法です。

重要な要件

useFormStatusは<form>の内側にレンダリングされるコンポーネントから呼び出す必要があります。フォームコンポーネント自体では動作しません：

// 間違い -- 動作しない
function Form() {
  const { pending } = useFormStatus(); // 常に { pending: false }
  return <form action={action}>...</form>;
}

// 正しい -- <form>内でレンダリングされるコンポーネント
function Form() {
  return (
    <form action={action}>
      <SubmitButton /> {/* ここでuseFormStatusが動作する */}
    </form>
  );
}

重要：react-domからインポート

他のHookとは異なり、useFormStatusはreactではなくreact-domからインポートします。これはDOMフォーム要素に固有であり、React Nativeなどの他のReactレンダラーには適用されないためです。