useDebounceFn

React hooks that debounce function

useDebounceFn wraps a function with debounce behavior powered by lodash.debounce. It returns an object with run, cancel, and flush methods, giving you full control over the debounced execution. The debounced function delays invoking your callback until after the specified wait time has elapsed since the last call.

When to Use

• Debouncing search input so API requests are only sent after the user stops typing
• Limiting the rate of expensive computations triggered by rapidly changing values (e.g., window resize calculations)
• Delaying form validation until the user pauses input

Notes

• Lodash options: The third parameter accepts lodash.debounce options such as leading, trailing, and maxWait for fine-tuned control.
• Cleanup: Call cancel() to discard any pending debounced invocation, or flush() to execute it immediately.
• See also useThrottleFn for rate-limiting that guarantees execution at regular intervals rather than waiting for inactivity.

Usage

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

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

API

useDebounceFn

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