bug: useMediaQuery doesn't clean up after itself

Is your feature request related to a problem? Please describe.

useMediaQuery hook breaks SSR on nextjs, producing mismatch errors and unexpected rendering

Describe the solution you’d like i’m very beginner in react but with some search i found this answer here _Originally posted by @lfades in https://github.com/vercel/next.js/discussions/17443#discussioncomment-87097_

so i used react useEffect as a wrapper to update a local state value on useMediaQuery changes. so i can achieve the navigationbar example turns into drawer on mobile

const [queryLargeMobile, setqueryLargeMobile] = useState(true);
 const { isLargeMobile } = useMediaQuery();

 useEffect(() => {
 	setqueryLargeMobile(isLargeMobile);
 	return () => {};
 }, [isLargeMobile]);

Describe alternatives you’ve considered i’m not sure if my solution is good but would be nice if useMediaQuery support SSR.

[CollierCZ]

And I think we determined the source: https://github.com/kiwicom/orbit/blob/master/packages/orbit-components/src/ThemeProvider/QueryContext/useMediaQueryContext.js#L68 We were adding a listener instead of removing it. 🤦 Should be a fix out soon. Thanks again for your help!

[CollierCZ]

I totally understand the difficulties of being a beginner and not knowing whether the error is coming from what you did or a specific library. I’m going to reopen the issue, because that new issue seems like a bug in the hook. Thanks for the report and the clear reproduction. We’ll be looking into it so I hope we’ll get a fix.