useThrottledCallback

useThrottledCallback は、渡されたコールバック関数をスロットリングして返す React フックです。 スロットリングされたコールバックは、指定した間隔につき最大 1 回だけ呼び出されます。

インターフェース

function useThrottledCallback<T>(options: Object): (nextValue: T) => void;

パラメータ

• optionsrequired · Object
  

  オプションのオブジェクト。

  • options.onChangerequired · (newValue: T) => void
    

    スロットリングするコールバック。最後に渡された値と同じ値での呼び出しはスキップされます。

  • options.timeThresholdrequired · number
    

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

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

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

戻り値

• (nextValue: T) => void
  

  指定した間隔につき最大 1 回、値を onChange に渡す、スロットリングされた関数。

使用例

import { useThrottledCallback } from 'react-simplikit';
import { useState } from 'react';

function ScrollPosition() {
  const [scrollTop, setScrollTop] = useState(0);
  const setScrollTopThrottled = useThrottledCallback({
    onChange: setScrollTop,
    timeThreshold: 200,
  });

  return (
    <div onScroll={e => setScrollTopThrottled(e.currentTarget.scrollTop)}>
      <p>Scrolled {scrollTop}px</p>
    </div>
  );
}