フロントエンドの定番ライブラリ「React 19」の新機能を紹介──新しいAPI

フロントエンド開発における定番ライブラリ「React」の最新バージョン解説 第4回

「アクション」に関連した新しいフック（2）

useFormStatusフック：フォーム内のコンポーネントで使える特殊なフック

　React 19でフォーム周りのAPIとして、もう一つ追加されたのがuseFormStatusフックです。

　このuseFormStatusはこれまで紹介してきたフックと異なり、従来の処理を大幅に改善するようなものではありません。使える場所も少々特殊で、<form>内に配置される子コンポーネント内でのみ使用できます。

　実際の使用例として、前回のサンプルをベースに、送信ボタンをコンポーネント化してuseFormStatusを使ってみましょう。なお、useFormStatusフックはreact-domからimportしてください。

[リスト2] useFormStatusの使用例 ※ファイル名：02_react19-data-update-useformstatus/src/index.jsx

// コンポーネント化した送信ボタン
function SubmitButton() {
  // useFormStatusで送信中状態と送信中のフォーム値を取得 ... (2)
  const { pending, data } = useFormStatus();
  const value = data?.get("title");
  return (
    <button type="submit" disabled={pending}>
      {value ? `${value} に更新中` : `更新`}
    </button>
  );
}
function UpdateTitle({ value, onUpdate }) {
  const [error, submitAction, isPending] = useActionState(
    // ～中略～
  );
  return (
    <form action={submitAction}>
      <input name="title" defaultValue={value} disabled={isPending} />
      {/* 必ず<form>内で使う ... (1) */}
      <SubmitButton />
      {error && <p>{error}</p>}
      <div>value: {value}</div>
    </form>
  );
}

　このサンプルを実行すると、送信中にボタンが無効になるだけでなく、ボタンの文字列に送信中の値（data?.get("title")）が表示されます。

useFormStatusを使った例

　SubmitButtonコンポーネントが<form>内で呼び出されていることに注意してください（（1））。このような場合にのみuseFormStatusフックが利用できます。

　useFormStatusフックは、フォームが送信中であるかどうかを示すpendingのほか、送信中の値をdata（FormData型）で参照できるため、これらの値をpropsで受け渡す必要がなくなります（（2））。

　注意が必要なのは、このdataはpendingがtrueの間、すなわちフォーム送信中のみ取得可能だということです（それ以外はnull）。あくまでフォーム送信処理中の表示を決定するためだけのものである点を覚えておきましょう。