homarr/packages/widgets/src/clock/use-current-time.ts

import { useEffect, useMemo, useRef, useState } from "react";
import dayjs from "dayjs";

export const useCurrentTime = ({ showSeconds }: { showSeconds: boolean }) => {
  const [time, setTime] = useState<Date | null>(null);
  const timeoutRef = useRef<ReturnType<typeof setTimeout>>(null);
  const intervalRef = useRef<ReturnType<typeof setInterval>>(null);
  const intervalMultiplier = useMemo(() => (showSeconds ? 1 : 60), [showSeconds]);

  useEffect(() => {
    setTime(new Date());
    timeoutRef.current = setTimeout(
      () => {
        setTime(new Date());
        intervalRef.current = setInterval(() => setTime(new Date()), intervalMultiplier * 1000);
      },
      intervalMultiplier * 1000 - (1000 * (showSeconds ? 0 : dayjs().second()) + dayjs().millisecond()),
    );

    return () => {
      if (timeoutRef.current) clearTimeout(timeoutRef.current);
      if (intervalRef.current) clearInterval(intervalRef.current);
    };
  }, [intervalMultiplier, showSeconds]);

  return time;
};