ontime/client/src/app/hooks/useTimeout.js

import { useEffect } from 'react';

//
// useTimeout React Hook
//
// React hook for delaying calls with time
export const useTimeout = (
  callback, // function to call. No args passed.
  timeout = 0, // delay, ms (default: immediately put into JS Event Queue)
  {
    // manage re-render behavior.
    // by default, a re-render in your component will re-define the callback,
    //    which will cause this timeout to cancel itself.
    // to avoid cancelling on re-renders (but still cancel on unmounts),
    //    set `persistRenders: true,`.
    persistRenders = false,
  } = {},
  // These dependencies are injected for testing purposes.
  // (pure functions - where all dependencies are arguments - is often easier to test)
  _setTimeout = setTimeout,
  _clearTimeout = clearTimeout,
  _useEffect = useEffect
) => {
  let timeoutId;
  const cancel = () => timeoutId && _clearTimeout(timeoutId);

  _useEffect(
    () => {
      timeoutId = _setTimeout(callback, timeout);
      return cancel;
    },
    persistRenders
      ? [_setTimeout, _clearTimeout]
      : [callback, timeout, _setTimeout, _clearTimeout]
  );

  return cancel;
};