useThrottle

useThrottle は、コールバック関数をスロットリングする React フックです。 スクロールやリサイズのイベントを処理する場合など、関数の呼び出し頻度を制限したいときに便利です。

インターフェース

function useThrottle<F extends (...args: any[]) => any>(
  callback: F,
  wait: number,
  options?: { edges?: Array<'leading' | 'trailing'> }
): F & { cancel: () => void };

パラメータ

• callbackrequired · F
  

  スロットリングする関数。

• waitrequired · number
  

  呼び出しを制限する間隔（ミリ秒単位）。

• options{ edges?: Array<'leading' | 'trailing'> }
  

  スロットリングの動作を制御するオプション。

  • options.edgesArray<'leading' | 'trailing'> · ['leading', 'trailing']
    

    関数を区間の開始時、終了時、またはその両方で呼び出すかを指定する省略可能な配列。

戻り値

• F & { cancel: () => void }
  

  待機中の実行をキャンセルする cancel メソッドを備えた、スロットリングされた関数を返します。

使用例

const throttledScroll = useThrottle(
  () => {
    console.log('Scroll event');
  },
  200,
  { edges: ['leading', 'trailing'] }
);

useEffect(() => {
  window.addEventListener('scroll', throttledScroll);
  return () => {
    window.removeEventListener('scroll', throttledScroll);
    throttledScroll.cancel();
  };
}, [throttledScroll]);