An accessible useMediaQuery hook

The hook

import { useEffect, useState } from "react";
 
export function useMediaQuery(query: string) {
  const [matches, setMatches] = useState(false);
 
  useEffect(() => {
    const media = window.matchMedia(query);
    const update = () => setMatches(media.matches);
    update();
    media.addEventListener("change", update);
    return () => media.removeEventListener("change", update);
  }, [query]);
 
  return matches;
}

For content that must be correct before hydration, prefer CSS media queries or a server-safe default. A hook is useful when behavior—not only presentation—must respond to prefers-reduced-motion, contrast, or layout conditions.