useDebounceFn

React hooks that debounce function

Usage

Live Editor

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>
  );
};

Result

Loading...

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

Argument	Description	Type	DefaultValue
fn	debounce function	T (Required)	-
wait	wait time	number | undefined	-
options	options passed to lodash.debounce	_.DebounceSettings | undefined	-