perf: fix double-render cycle in useIsMobile hook (#274)

* perf: fix double-render cycle in useIsMobile hook

* refactor: extract mobile query into a constant

---------

Co-authored-by: satnaing <[email protected]>

Author: liovic

src/hooks/use-mobile.tsx

@@ -1,19 +1,16 @@
 import * as React from 'react'
 
 const MOBILE_BREAKPOINT = 768
+const MOBILE_QUERY = `(max-width: ${MOBILE_BREAKPOINT - 1}px)`
 
 export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
-
-  React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
-    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    }
-    mql.addEventListener('change', onChange)
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    return () => mql.removeEventListener('change', onChange)
-  }, [])
-
-  return !!isMobile
+  return React.useSyncExternalStore(
+    (callback) => {
+      const mql = window.matchMedia(MOBILE_QUERY)
+      mql.addEventListener('change', callback)
+      return () => mql.removeEventListener('change', callback)
+    },
+    () => window.matchMedia(MOBILE_QUERY).matches,
+    () => false
+  )
 }