FULL ON WEBSITE REMAKE

src/app/components/Clock.tsx

@@ -1,9 +1,20 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useSyncExternalStore } from "react";
 
-function format(date: Date) {
-  return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+function getTime(withSeconds: boolean) {
+  const now = new Date();
+  return now.toLocaleTimeString(
+    [],
+    withSeconds
+      ? { hour: "2-digit", minute: "2-digit", second: "2-digit" }
+      : { hour: "2-digit", minute: "2-digit" }
+  );
+}
+
+function subscribe(callback: () => void) {
+  const id = window.setInterval(callback, 1000);
+  return () => window.clearInterval(id);
 }
 
 export default function Clock({
@@ -13,28 +24,12 @@ export default function Clock({
   className?: string;
   withSeconds?: boolean;
 }) {
-  const [now, setNow] = useState<Date | null>(() =>
-    typeof window === "undefined" ? null : new Date()
+  const text = useSyncExternalStore(
+    subscribe,
+    () => getTime(withSeconds),
+    () => ""
   );
 
-  useEffect(() => {
-    const id = window.setInterval(
-      () => setNow(new Date()),
-      withSeconds ? 1000 : 10000
-    );
-    return () => window.clearInterval(id);
-  }, [withSeconds]);
-
-  const text = now
-    ? withSeconds
-      ? now.toLocaleTimeString([], {
-          hour: "2-digit",
-          minute: "2-digit",
-          second: "2-digit",
-        })
-      : format(now)
-    : "";
-
   return (
     <span className={className} suppressHydrationWarning>
       {text}