useDebounce hook with TS + underscorejs

useDebounce.ts

import { useState, useEffect } from 'react';
import _ from 'underscore';

const DEFAULT_DEBOUNCE_TIMEOUT = 1000;

/**
 * Debounce fast changing value.
 * The debounced value will only reflect the latest value when the hook has not been called for the specified time period.
 */
function useDebounce(
  value: any,
  wait: number = DEFAULT_DEBOUNCE_TIMEOUT,
  immediate?: boolean,
) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const debouncedFn = _.debounce(
      () => setDebouncedValue(value),
      wait,
      immediate,
    );

    debouncedFn();

    // Cancel the timeout if value changes
    // Timeout gets cleared and restarted
    return () => {
      debouncedFn.cancel();
    };
  }, [immediate, value, wait]); // Only re-call effect if value or delay changes

  return debouncedValue;
}

export default useDebounce;