Skip to content
Permalink
master
Switch branches/tags
Go to file
@xobotyi
Latest commit 42fdec1 Aug 26, 2019 History
- tests;
- fix function change debounce clear and reset;
- declare return type;
4 contributors

Users who have contributed to this file

@xobotyi @wardoost @Jivings @brickspert

useDebounce

React hook that delays invoking a function until after wait milliseconds have elapsed since the last time the debounced function was invoked.

The third argument is the array of values that the debounce depends on, in the same manner as useEffect. The debounce timeout will start when one of the values changes.

Usage

const Demo = () => {
  const [state, setState] = React.useState('Typing stopped');
  const [val, setVal] = React.useState('');
  const [debouncedValue, setDebouncedValue] = React.useState('');

  const [, cancel] = useDebounce(
    () => {
      setState('Typing stopped');
      setDebouncedValue(val);
    },
    2000,
    [val]
  );

  return (
    <div>
      <input
        type="text"
        value={val}
        placeholder="Debounced input"
        onChange={({ currentTarget }) => {
          setState('Waiting for typing to stop...');
          setVal(currentTarget.value);
        }}
      />
      <div>{state}</div>
      <div>
        Debounced value: {debouncedValue}
        <button onClick={cancel}>Cancel debounce</button>
      </div>
    </div>
  );
};

Reference

const [
    isReady: () => boolean | null,
    cancel: () => void,
] = useDebounce(fn: Function, ms: number, deps: DependencyList = []);
  • fn: Function - function that will be called;
  • ms: number - delay in milliseconds;
  • deps: DependencyList - array of values that the debounce depends on, in the same manner as useEffect;
  • isReady: ()=>boolean|null - function returning current debounce state:
    • false - pending
    • true - called
    • null - cancelled
  • cancel: ()=>void - cancel the debounce