window.matchMedia(query) returns a MediaQueryList whose matches property reflects the current state and which fires a change event whenever the match flips. Reading the initial state synchronously inside the lazy initializer means the first render already has the right value (no flicker), and resyncing on subscribe handles the rare case where the value flipped between mount and effect-run. This is the right shape for prefers-color-scheme, prefers-reduced-motion, and any breakpoint.

Reading window.matchMedia during render breaks SSR because window does not exist on the server, and reading it during the first client render breaks hydration when the result differs from the server-rendered HTML. Returning fallback synchronously and updating inside useEffect keeps both sides happy: the server and first client render produce identical markup, and the actual match flips in afterward. This is the version to ship with Next.js, Remix, or Astro.

Most teams settle on a small named set of breakpoints rather than memorising raw min-width queries. Wrapping useMediaQuery in a useBreakpoint(name) helper centralises the table so design tokens and code stay in lockstep. The helper is intentionally thin so renaming a breakpoint changes one constant rather than every call site. For more complex needs (smallest matching breakpoint, current viewport name) compose this hook with a fallback chain or a small reducer over all four results.