Basic Timer in React

Timer.jsx

import React, { useEffect, useState } from "react";
import { dynamicTimeLeft } from "utils/date";

interface TimerProps {
  dateEnd: Date;
}

const Timer: React.FC<TimerProps> = ({ dateEnd }) => {
  const [time, setTime] = useState<null | string>(null);

  useEffect(() => {
    if (!dateEnd) {
      return;
    }

    const intervalId = setInterval(function () {
      const now = new Date();
      const remainingTime = dynamicTimeLeft(now, dateEnd);

      setTime(remainingTime);
    }, 1000);
    return () => {
      clearInterval(intervalId);
    };
  }, [dateEnd]);

  return <span className="text-xl font-medium">{time}</span>;
};

const dynamicTimeLeft = (date1: Date, date2: Date) => {
  const distance = date2.getTime() - date1.getTime();

  const hours = Math.floor(
    (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
  );
  const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((distance % (1000 * 60)) / 1000);
  const addZero = (t: number) => (t > 9 ? t : `0${t}`);

  return `${addZero(hours)}:${addZero(minutes)}:${addZero(seconds)}`;
};

export default Timer;