feat: update links for improved accessibility

packages/ui/src/hooks/use-mobile.tsx

@@ -1,20 +1,25 @@
-import { useEffect, useState } from "react";
+import { useRef, useState, useSyncExternalStore } from "react";
 
 const MOBILE_BREAKPOINT = 768;
 const MOBILE_QUERY = `(max-width: ${MOBILE_BREAKPOINT - 1}px)`;
 
 export function useIsMobile() {
-	const [isMobile, setIsMobile] = useState<boolean | undefined>(undefined);
+	const [mediaQueryList] = useState(() => (typeof window === "undefined" ? null : window.matchMedia(MOBILE_QUERY)));
+	const latestMatchesRef = useRef(mediaQueryList?.matches ?? false);
 
-	useEffect(() => {
-		const mql = window.matchMedia(MOBILE_QUERY);
-		const onChange = (e: MediaQueryListEvent) => {
-			setIsMobile(e.matches);
-		};
-		mql.addEventListener("change", onChange);
-		setIsMobile(mql.matches);
-		return () => mql.removeEventListener("change", onChange);
-	}, []);
+	return useSyncExternalStore(
+		(onStoreChange) => {
+			if (!mediaQueryList) return () => {};
 
-	return !!isMobile;
+			const handleChange = (event: MediaQueryListEvent | { matches: boolean }) => {
+				latestMatchesRef.current = event.matches;
+				onStoreChange();
+			};
+
+			mediaQueryList.addEventListener("change", handleChange);
+			return () => mediaQueryList.removeEventListener("change", handleChange);
+		},
+		() => latestMatchesRef.current,
+		() => false,
+	);
 }