update use-mobile

Author: taylorotwell

resources/js/hooks/use-mobile.tsx

@@ -1,22 +1,36 @@
-import { useEffect, useState } from 'react';
+import { useSyncExternalStore } from 'react';
 
 const MOBILE_BREAKPOINT = 768;
 
-export function useIsMobile() {
-    const [isMobile, setIsMobile] = useState<boolean>();
+const mql =
+    typeof window === 'undefined'
+        ? undefined
+        : window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
 
-    useEffect(() => {
-        const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+function mediaQueryListener(callback: (event: MediaQueryListEvent) => void) {
+    if (!mql) {
+        return () => {};
+    }
 
-        const onChange = () => {
-            setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-        };
+    mql.addEventListener('change', callback);
 
-        mql.addEventListener('change', onChange);
-        setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => {
+        mql.removeEventListener('change', callback);
+    };
+}
+
+function isSmallerThanBreakpoint(): boolean {
+    return mql?.matches ?? false;
+}
 
-        return () => mql.removeEventListener('change', onChange);
-    }, []);
+function getServerSnapshot(): boolean {
+    return false;
+}
 
-    return !!isMobile;
+export function useIsMobile(): boolean {
+    return useSyncExternalStore(
+        mediaQueryListener,
+        isSmallerThanBreakpoint,
+        getServerSnapshot
+    );
 }