useThrottleFn

React hooks that throttle function

useThrottleFn wraps a function with throttle behavior powered by lodash.throttle. It returns an object with run, cancel, and flush methods. Unlike debounce, throttle guarantees that the function executes at most once per specified time interval, making it ideal for rate-limiting high-frequency events while still providing periodic updates.

When to Use

• Rate-limiting scroll or mousemove event handlers to maintain smooth performance without dropping all intermediate calls
• Ensuring a save or sync operation runs at regular intervals during continuous user input
• Throttling resize handlers to limit layout recalculations while still responding periodically

Notes

• Lodash options: The third parameter accepts lodash.throttle options such as leading and trailing to control whether the function fires at the start, end, or both edges of the throttle window.
• Cleanup: Call cancel() to discard any pending throttled invocation, or flush() to execute it immediately.
• See also useDebounceFn for delaying execution until after a pause in activity, which is better suited for search-as-you-type patterns.

Usage

function Demo() {
  const [value, setValue] = useState(0);
  const { run } = useThrottleFn(() => {
    setValue(value + 1);
  }, 500);

  return (
    <div>
      <p style={{ marginTop: 16 }}> Clicked count: {value} </p>
      <button type="button" onClick={run}>
        Click fast!
      </button>
    </div>
  );
};

API

useThrottleFn

Returns

{ run: _.DebouncedFunc<(...args_0: Parameters<T>) => ReturnType<T>>; cancel: () => void; flush: any; }: A object with the following elements:

• run: exec function.
• cancel: cancel exec function.
• flush: immediately exec function

Arguments