import { useCallback, useEffect, useState } from 'react';
import dayjs, { Dayjs } from 'dayjs';

// Plus one to make sure rounding doesn't interfere
const msToMidnight = () => dayjs().add(1, 'day').startOf('date').diff(dayjs()) + 1;

export function useCurrentDate(): Dayjs {
  const [currentDate, setCurrentDate] = useState(dayjs());

  const updateDate = useCallback((): ReturnType<typeof setTimeout> => {
    const currentDate = dayjs();
    const msToNextDay = msToMidnight();

    setCurrentDate(currentDate);
    return setTimeout(updateDate, msToNextDay);
  }, []);

  useEffect(() => {
    const timer = updateDate();
    return () => clearTimeout(timer);
  }, [updateDate]);

  return currentDate;
}

import { useCallback, useEffect, useState } from 'react';
import dayjs, { Dayjs } from 'dayjs';

// Plus one to make sure rounding doesn't interfere
const msToMidnight = () => dayjs().add(1, 'day').startOf('date').diff(dayjs()) + 1;

export function useCurrentDate(): Dayjs {
  const [currentDate, setCurrentDate] = useState(dayjs());

  const updateDate = useCallback(() => {
    const currentDate = dayjs();
    const msToNextDay = msToMidnight();

    setCurrentDate(currentDate);
    setTimeout(updateDate, msToNextDay);
  }, []);

  useEffect(updateDate, [updateDate]);

  return currentDate;
}

--- 
+++ 
@@ -7,15 +7,18 @@
 export function useCurrentDate(): Dayjs {
   const [currentDate, setCurrentDate] = useState(dayjs());
 
-  const updateDate = useCallback(() => {
+  const updateDate = useCallback((): ReturnType<typeof setTimeout> => {
     const currentDate = dayjs();
     const msToNextDay = msToMidnight();
 
     setCurrentDate(currentDate);
-    setTimeout(updateDate, msToNextDay);
+    return setTimeout(updateDate, msToNextDay);
   }, []);
 
-  useEffect(updateDate, [updateDate]);
+  useEffect(() => {
+    const timer = updateDate();
+    return () => clearTimeout(timer);
+  }, [updateDate]);
 
   return currentDate;
 }
Add cleanup to updateDate hook
