組み込みの 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>
);
}