useDebouncedCallback

useDebouncedCallback is a React hook that returns a debounced version of the provided callback function. It helps optimize event handling by delaying function execution and grouping multiple calls into one. Note that if both 'leading' and 'trailing' are set, the function will be called at both the start and end of the delay period. However, it must be called at least twice within debounceMs interval for this to happen, since one debounced function call cannot trigger the function twice.

Interface

function useDebouncedCallback(options: Object): Function;

Parameters

• optionsrequired · Object
  

  The options object.

  • options.onChangerequired · Function
    

    The callback function to debounce.

  • options.timeThresholdrequired · number
    

    The number of milliseconds to delay the function execution.

  • options.leadingboolean · false
    

    If true, the function is called at the start of the sequence.

  • options.trailingboolean · true
    

    If true, the function is called at the end of the sequence.

Return Value

• Function
  

  debounced function that delays invoking the callback.

Example

function SearchInput() {
  const [query, setQuery] = useState('');
  const debouncedSetQuery = useDebouncedCallback({
    onChange: setQuery,
    timeThreshold: 100,
  });
  return (
    <input type="text" onChange={e => debouncedSetQuery(e.target.value)} />
  );
}