実践的な活用例：検索、スクロール、リサイズ

ライブ検索コンポーネントでは、2 つの状態変数を分けて管理します。inputValue は入力値そのものを保持し、キー入力のたびに更新して入力フィールドの応答性を維持します。debouncedQuery は useDebounce(inputValue, 300) から取得し、入力が止まって 300ms 後に更新されて API 呼び出しを開始します。このように分離することで、過剰なリクエストを発生させずに、画面上ではすぐにフィードバックを表示できます。

API 呼び出しが始まったときだけでなく、ユーザーが入力を始めた時点ですぐにローディングスピナーを表示します。デバウンスの待機中は値が同期していないため、inputValue !== debouncedQuery になるたびに isLoading: true を設定します。クエリが確定し、fetch が完了したら false に戻します。これにより、ユーザーは検索中も応答性の高いローディング表示を確認できます。

パララックス効果や読了進捗バーは、スクロール位置に基づいて更新されます。16ms の遅延を使ってスクロールハンドラーを最大 60fps にスロットリングします。const throttledScrollY = useThrottle(scrollY, 16) のように記述します。スクロールの 1 ピクセルごとに位置を再計算する負荷を抑えながら、UI を滑らかに更新できます。

レイアウトを再計算するためにウィンドウのリサイズを監視する場合は、スロットリングではなくデバウンスが適しています。レイアウト計算は、ユーザーがリサイズを終えた後に 1 回だけ実行すれば十分です。ウィンドウのサイズに 200ms のデバウンスを設定します。リサイズ中は UI に簡略化した状態を表示し、リサイズが止まった時点で再計算したレイアウトを表示できます。

debouncedQuery が変化したら、新しい AbortController を作成し、その signal を fetch(url, { signal }) に渡します。controller.abort() を呼び出すクリーンアップ関数を返します。これにより、新しいデバウンス済みクエリが届いたときに、前のクエリによる実行中のリクエストをキャンセルできます。その結果、遅い古いレスポンスが速い新しいレスポンスを上書きする競合状態を防げます。

AbortController がない場合、ユーザーが「re」と入力して待った後に「react」と入力すると、キャッシュの影響で 2 番目のクエリが 1 番目より先に返ることがあります。検索結果には一時的に React の結果が表示された後、古い「re」の結果で上書きされてしまいます。AbortController は、先行するリクエスト自体をキャンセルすることでこの問題を防ぎます。

このドロップダウンでは、API 呼び出しにデバウンスを使い、入力表示には即時更新される状態を使います。テキストフィールドに表示される内容は inputValue で制御します。候補の取得を開始するタイミングは useDebounce(inputValue, 250) で制御します。候補リストは、取得結果を保持する状態から描画します。この状態は、どちらの入力状態とも分離されています。

メールアドレスがすでに存在するかの確認など、非同期のフォームバリデーションにはデバウンスを設定し、キー入力のたびにサーバーへリクエストを送らないようにします。フィールドの値に 400ms のデバウンスを設定し、デバウンス済みの値を依存配列に指定した useEffect でバリデーションリクエストを実行します。バリデーションの待機中は、フィールドにスピナーを表示します。

デバウンスは、ユーザーの入力中にフォームの内容を自動保存するのに最適です。フォームの値オブジェクトに 1000ms のデバウンスを設定します。デバウンス済みの値が変化したら、localStorage または API エンドポイントへの保存を開始します。デバウンスの待機中は「保存中...」、リクエストが完了したら「保存済み」と表示します。

遅延時間はユーザー体験に関わる判断です。検索では、200〜300ms にすると応答性とリクエスト削減のバランスが取れます。リサイズでは、ユーザーはリサイズ後にレイアウトが落ち着くことを期待するため、150〜200ms が適切です。自動保存では、1000ms にするとユーザーが文章を 1 文入力してから保存できます。想定される操作の速さに応じて調整してください。

実際のアプリケーションでは、複数の最適化を同時に必要とすることがよくあります。たとえばドキュメントエディターでは、自動保存にデバウンス（1 秒）、単語数の計算にスロットリング（500ms）、分析に IntersectionObserver を使用できます。これらの手法は、それぞれが独自のタイマーと対象範囲で独立して動作するため、うまく組み合わせられます。

デバウンスした検索クエリと AbortController を組み合わせて使用するのはなぜですか？

検索入力、リサイズハンドラー、フォームの自動保存には useDebounce を使用します。スクロールやマウス移動には useThrottle を使用します。競合状態を防ぐため、デバウンスした API 呼び出しには必ず AbortController を組み合わせます。UI の応答性と情報性を維持するため、inputValue !== debouncedQuery のときは常にローディング状態を表示します。