Implement useMediaQuery hook.

How would you write a simple useMediaQuery hook that returns true when the viewport matches a given CSS media query string?

If you call your hook with '(max-width: 600px)' and then resize the window, what steps does your hook need to take to update the component?

We have a component that shows a mobile navigation drawer only on screens smaller than 768px. It sometimes doesn't hide when the window is resized larger. Walk me through how you'd debug the useMediaQuery implementation.

Explain why you might want to debounce the media query listener in your hook, and show how you'd add that.

In a large application, many components use useMediaQuery. What strategies would you use to avoid creating a separate matchMedia listener for each hook instance?

How would you adapt your useMediaQuery hook to work correctly with server-side rendering and avoid hydration mismatches?

Our design system team wants to expose a shared media query utility across multiple micro‑frontends. What architectural considerations would you raise when deciding whether to ship useMediaQuery as a library versus a built‑in framework feature?

If we need to support legacy browsers that lack window.matchMedia, how would you design a fallback strategy that keeps the hook's API stable across the organization?