useThrottleカスタムフックの実装

デバウンスは、イベントが発生するたびにタイマーをリセットするだけです。一方、スロットルでは、最後に実行した時刻を継続的に追跡し、次の実行に十分な時間が経過したかどうかを判断する必要があります。そのため、レンダーをまたいでタイムスタンプを保持する必要があり、実装はデバウンスより少し複雑になります。

最後に実行した時刻のタイムスタンプは、再レンダリングを発生させずにレンダーをまたいで保持する必要があるため、useRef が適しています。タイムスタンプを const lastRunTime = useRef(Date.now()) として保存します。state とは異なり、ref を更新しても再レンダリングは発生しないため、余分な処理サイクルを発生させずにスロットルのロジックを効率よく実行できます。

useThrottle(value, delay) フックは、入力値をスロットルしたものを返します。その契約は useDebounce と似ており、任意の値とミリ秒単位の遅延時間を受け取り、スロットルされた値を返します。コンポーネントでは同じ方法で使用できるため、異なるタイミング制御が必要な場合にそのまま置き換えられます。

トレーリングエッジのスロットルは、各インターバルの終わりに値を更新します。新しい値が届いたら、残りのインターバル時間分の setTimeout をスケジュールします: delay - (Date.now() - lastRunTime.current)。タイマーが発火したら状態を更新し、新しい lastRunTime を記録します。クリーンアップで以前のタイマーをキャンセルしてください。

リーディングエッジのスロットルは、最初の値をすぐに適用し、インターバルが終了するまで後続の値を無視します。Date.now() - lastRunTime.current >= delay を確認し、条件を満たしていれば状態を更新して時刻を記録します。満たしていなければ更新をスキップします。これにより、最初の操作にはすぐ反応し、その後はクールダウン期間を設けられます。

最適な UX では、多くの場合この2つを組み合わせます。最初のイベントにはすぐに反応し（リーディング）、その後、インターバルの経過後に最終状態も確実に適用します（トレーリング）。これにより、ユーザーは最初の操作に対する素早い反応を確認でき、動きが止まった後には最終的な値が必ず適用されるため、終了時に古い状態が残るのを防げます。

保留中のタイムアウトIDを useRef に保存します: const timeoutRef = useRef(null)。新しいタイムアウトをスケジュールする前に clearTimeout(timeoutRef.current) を呼び出し、既存のタイムアウトがあればキャンセルします。これにより、複数のタイマーが重なって1つのスロットル間隔内に複数回更新されるのを防げます。

useEffect のクリーンアップでは clearTimeout(timeoutRef.current) を呼び出し、コンポーネントのアンマウント時に保留中のトレーリング更新をキャンセルしてください。これを行わないと、アンマウント後に保留中のタイムアウトが発火し、アンマウント済みのコンポーネントの状態を更新しようとして、Reactの警告が発生する可能性があります。

値を基にするフックの代わりに、useCallback を基にしたスロットルフックを作成できます。useThrottledCallback(fn, delay) は、スロットルされた関数を返します。分析トラッカーのように、スロットルしたい対象がリアクティブな値ではなく関数呼び出しの場合に、こちらのほうが柔軟です。

Jestのテストでは、jest.useFakeTimers() を使って時間を制御します。1000msの遅延でスロットルを設定し、値を10回すばやく変更した後、フェイクタイマーを500ms進めて更新が1回または2回だけ発生したことを確認します。さらに500ms進め、トレーリング更新が発火することを検証します。これにより、スロットルの動作を決定論的に検証できます。

Reactは、レンダー中の状態更新をバッチ処理します。状態更新に対して動作するスロットルは、このモデル内で問題なく機能します。ただし、React 18のConcurrent Modeでは、レンダーが中断される可能性があります。Date.now() による実際の経過時間に基づくスロットルロジック自体は、Reactのスケジューリングの影響を受けません。

「トレーリング」スロットルは、どちらのエッジで発火しますか？

スロットルでは、useRef を使って最後に実行した時刻を追跡する必要があります。フックでは、リーディングエッジ（即時）、トレーリングエッジ（遅延）、またはその両方を実装できます。タイムアウトIDは必ずrefに保存し、クリーンアップでキャンセルしてください。関数を対象にする場合は、useThrottledCallback パターンを使用するのが適しています。信頼性を高めるため、フェイクタイマーでテストしてください。