React Hook 'useDebounced' for debouncing event handlers

example.js

function Foo({ onClick }) {
  let handler = useDebounced(onClick, { delay: 1000, leading: true });
  
  return <button onClick={handler}>Click me</button>;
}

useDebounced.js

function useDebounced(func, { delay, ...opts}, variables = null) {
  const ref = useRef(() => {
    throw new Error(`Can't call debounced function before mount`);
  });
  
  useEffect(() => {
    const debounced = lodash.debounce(func, delay, opts);
    ref.current = debounced;
    
    return debounced.cancel;
  }, variables || [func]);
  
  return ref.current;
}