feat: refactor now time

app/(main)/header.tsx

@@ -97,34 +97,25 @@ function Links() {
   )
 }
 
-// https://github.com/streamich/react-use/blob/master/src/useInterval.ts
-const useInterval = (callback: () => void, delay: number | null) => {
-  const savedCallback = useRef<() => void>(() => {})
-  useEffect(() => {
-    savedCallback.current = callback
-  })
-  useEffect(() => {
-    if (delay !== null) {
-      const interval = setInterval(() => savedCallback.current(), delay || 0)
-      return () => clearInterval(interval)
-    }
-    return undefined
-  }, [delay])
-}
 function Overview() {
   const t = useTranslations("Overview")
   const [mouted, setMounted] = useState(false)
   useEffect(() => {
     setMounted(true)
   }, [])
-  const timeOption = DateTime.TIME_SIMPLE
+  const timeOption = DateTime.TIME_WITH_SECONDS
   timeOption.hour12 = true
   const [timeString, setTimeString] = useState(
     DateTime.now().setLocale("en-US").toLocaleString(timeOption),
   )
-  useInterval(() => {
-    setTimeString(DateTime.now().setLocale("en-US").toLocaleString(timeOption))
-  }, 1000)
+  useEffect(() => {
+    const updateTime = () => {
+      const now = DateTime.now().setLocale("en-US").toLocaleString(timeOption)
+      setTimeString(now)
+      requestAnimationFrame(updateTime)
+    }
+    requestAnimationFrame(updateTime)
+  }, [])
   return (
     <section className={"mt-10 flex flex-col md:mt-16"}>
       <p className="text-base font-semibold">{t("p_2277-2331_Overview")}</p>