improvements

utils/useMediaQuery.tsx

@@ -1,25 +1,19 @@
-import { useState, useEffect } from "react"
+import { useCallback, useSyncExternalStore } from 'react';
+
+const serverSnapshot = () => false;
 
 export default function useMediaQuery(mediaQuery: string): boolean {
-  const [isMatch, setIsMatch] = useState(
-    typeof window !== 'undefined' ? window.matchMedia(mediaQuery).matches : false
+  const subscribe = useCallback(
+    (onChange: () => void) => {
+      const query = window.matchMedia(mediaQuery);
+      query.addEventListener('change', onChange);
+      return () => query.removeEventListener('change', onChange);
+    },
+    [mediaQuery]
   );
-
-  useEffect(() => {
-    const onChange = (event: MediaQueryListEvent) => {
-      setIsMatch(event.matches);
-    };
-
-    window
-      .matchMedia(mediaQuery)
-      .addEventListener("change", onChange);
-
-    return () => {
-      window
-        .matchMedia(mediaQuery)
-        .removeEventListener("change", onChange);
-    };
-  }, []);
-
-  return isMatch;
-}
+  const snapshot = useCallback(
+    () => window.matchMedia(mediaQuery).matches,
+    [mediaQuery]
+  );
+  return useSyncExternalStore(subscribe, snapshot, serverSnapshot);
+}