import { useEffect, useMemo, useRef, useState } from "react"; import dayjs from "dayjs"; export const useCurrentTime = ({ showSeconds }: { showSeconds: boolean }) => { const [time, setTime] = useState(null); const timeoutRef = useRef>(null); const intervalRef = useRef>(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; };