UseInterval

useInterval.tsx

import { useEffect, useRef, useState } from 'react';

interface UseIntervalProps {
  fn: () => void;
  interval: number;
}

interface UseIntervalReturn {
  active: boolean;
  start: () => void;
  stop: () => void;
  toggle: () => void;
}

export default function useInterval(props: UseIntervalProps): UseIntervalReturn {
  const { fn, interval } = props;
  const fnRef = useRef<() => void>();
  const intervalRef = useRef<number>();
  const [active, setActive] = useState(false);

  useEffect(() => {
    fnRef.current = fn;
  }, [fn]);

  function start() {
    setActive((old) => {
      if (!old) {
        intervalRef.current = window.setInterval(fnRef.current, interval);
      }
      return true;
    });
  }

  function stop() {
    setActive(false);
    window.clearInterval(intervalRef.current);
  }

  function toggle() {
    if (active) {
      stop();
    } else {
      start();
    }
  }

  return { active, start, stop, toggle };
}