useThrottle

對值進行節流的React hook

useThrottle 回傳一個節流版本的值，在指定的時間間隔內最多更新一次。與防抖不同，節流確保值在固定的最大頻率下更新，即使來源值持續變更。

使用場景

在拖動、捲動或調整大小期間以固定頻率更新顯示值
限制依賴快速變化輸入的計算或渲染頻率
以穩定的更新率追蹤快速變化的感測器或輸入資料

注意事項

值節流：此 hook 對值進行節流。如需對函式進行節流，請使用 useThrottleFn。
前緣觸發：值在間隔開始時立即更新，然後在間隔到期後才會再次更新。
相關 hooks：另請參閱 useThrottleFn 用於函式節流，以及 useDebounce 用於值防抖。

Usage

Live Editor


function Demo() {
  const [value, setValue] = useState<string>();
  const throttledValue = useThrottle(value, 500);

  return (
    <div>
      <input
        value={value}
        onChange={e => setValue(e.target.value)}
        placeholder="輸入值"
        style={{ width: 280 }}
      />
      <p style={{ marginTop: 16 }}>節流值：{throttledValue}</p>
    </div>
  );
};

Result

API

useThrottle

Returns

T

Arguments

參數名	描述	類型	預設值
value	要节流的值	T (必填)	-
wait	间隔时间	number \| undefined	-
options	传递给 `lodash.throttle` 的选项	_.ThrottleSettings \| undefined	-