useDebounce

對值進行防抖的React hook

useDebounce 回傳一個防抖版本的值，只有在指定延遲內沒有新值到來時才更新。這對於避免由快速變化的值觸發的昂貴操作（如 API 呼叫或複雜計算）非常有用。

使用場景

  • 對搜尋輸入值進行防抖以延遲觸發 API 請求
  • 避免在快速拖動滑桿時頻繁更新
  • 延遲處理使用者輸入直到使用者暫停輸入

注意事項

  • 值防抖：此 hook 對值進行防抖。如需對函式進行防抖，請使用 useDebounceFn。
  • 延遲：預設延遲可自訂。較長的延遲減少更新頻率但增加感知延遲。
  • 相關 hooks：另請參閱 useDebounceFn 用於函式防抖，以及 useThrottle 用於值節流。

Usage

Live Editor

function Demo() {
  const [value, setValue] = useState<string>("");
  const debouncedValue = useDebounce(value, 500);

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

API

useDebounce

Returns

T

Arguments

參數名描述類型預設值
value要防抖的值T (必填)-
wait间隔时间number | undefined-
options传递给 lodash.debounce 的选项_.DebounceSettings | undefined-