useMediaQuery

Requirements

• Export useMediaQuery(query, defaultValue = false) as named and default. Return the current boolean match for the provided query string.
• Use window.matchMedia and modern MediaQueryList change event listeners. Read the current matches value on mount and respond to subsequent matching and nonmatching changes.
• When query changes, read and subscribe to the new list and remove the old subscription. Keep one active listener per mounted hook instance; rerenders must not accumulate listeners.
• Remove the active listener on unmount and handle React Strict Mode effect replay. Multiple instances may observe the same query without interfering with each other.
• When matchMedia is unavailable, return defaultValue. During server rendering return defaultValue without accessing window. Browser matches take precedence over the fallback.
• Legacy addListener APIs, query validation, polyfilling matchMedia, and interpreting CSS expressions yourself are outside scope. useSyncExternalStore is suitable for synchronized external snapshots.

Examples

Input: const wide = useMediaQuery("(min-width: 900px)");
Output: true while the viewport matches; updates when the match changes.

Input: const dark = useMediaQuery("(prefers-color-scheme: dark)", false);
Output: Uses false for server rendering and the browser match after hydration.