組み込みの React DOM フック

react-dom パッケージには、（ブラウザ DOM 環境で実行される）ウェブアプリケーション専用のフックが含まれています。これらのフックは、iOS、Android、Windows アプリケーションといった非ブラウザ環境ではサポートされていません。ウェブブラウザとその他の環境の両方でサポートされるフックを探している場合は、React のフック一覧ページをご覧ください。このページは、react-dom パッケージのすべてのフックの一覧です。

フォーム関連フック

Canary

フォーム関連フックは現在、React の Canary および experimental チャンネルでのみ利用可能です。React のリリースチャンネルについてはこちらをご覧ください。

フォームにより、情報を送信するためのインタラクティブなコントロールを作成できます。コンポーネント内でフォームを管理するために以下のフックを使用できます。

useFormStatus によりフォームのステータスに基づいて UI を更新できます。
useFormState によりフォーム内で state を管理できます。

function Form({ action }) {
  async function increment(n) {
    return n + 1;
  }
  const [count, incrementFormAction] = useFormState(increment, 0);
  return (
    <form action={action}>
      <button formAction={incrementFormAction}>Count: {count}</button>
      <Button />
    </form>
  );
}

function Button() {
  const { pending } = useFormStatus();
  return (
    <button disabled={pending} type="submit">
      Submit
    </button>
  );
}

NextuseFormState