A React Custom Hook to opt the component (and all downstream components) into re-renders that occur on a specified interval.

useCurrentTime.ts

import { useRef, useState } from 'react';

/**
 * This hook will opt your component (and all downstream components) into
 * rerenders that occur on the interval specified.
 *
 * ⚠️ This may induce serious performance consequences, especially when
 * choosing a shorter intervalDuration
 *
 * @param intervalDuration number (in ms), default to 1000ms
 * @returns the number of ms since Jan 1, 1970 (UTC)
 */
export function useCurrentTime(intervalDuration: number = 1000) {
  const isInitialized = useRef(false);
  const [currentTime, setCurrentTime] = useState(Date.now);

  if (!isInitialized.current) {
    setInterval(() => {
      setCurrentTime(Date.now);
    }, intervalDuration);

    isInitialized.current = true;
  }

  return currentTime;
}