feat: optimize time display rendering with requestAnimationFrame

app/(main)/header.tsx

@@ -30,16 +30,32 @@ const useCurrentTime = () => {
   })
 
   useEffect(() => {
-    const timer = setInterval(() => {
+    let animationFrameId: number
+    let lastSecond = DateTime.now().setLocale("en-US").second
+
+    const updateTime = () => {
       const now = DateTime.now().setLocale("en-US")
+      const currentSecond = now.second
+
+      if (currentSecond !== lastSecond) {
+        lastSecond = currentSecond
         setTime({
           hh: now.hour,
           mm: now.minute,
-        ss: now.second,
+          ss: currentSecond,
         })
-    }, 1000)
+      }
 
-    return () => clearInterval(timer)
+      animationFrameId = requestAnimationFrame(updateTime)
+    }
+
+    animationFrameId = requestAnimationFrame(updateTime)
+
+    return () => {
+      if (animationFrameId) {
+        cancelAnimationFrame(animationFrameId)
+      }
+    }
   }, [])
 
   return time