A simple hook for managing intervals with React

useInterval.ts

import { useEffect, useRef } from 'react';

/**
 * Activate with a delay greater than zero
 * The last callback is applied immediately
 *
 * Adapted from https://usehooks-ts.com/react-hook/use-interval
 */
export function useInterval(callback: () => void, delay: number | null) {
  const savedCallback = useRef(callback);
  // eslint-disable-next-line no-undef
  const interval = useRef<NodeJS.Timer | null>(null);

  // Remember the latest callback if it changes.
  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  // Set up the interval.
  useEffect(() => {
    if (delay && typeof delay === 'number' && delay > 0) {
      interval.current = setInterval(() => savedCallback.current(), delay);
    }

    // clear the interval if delay changes
    return () => {
      if (interval.current) clearInterval(interval.current);
    };
  }, [delay]);
}