[useMediaQuery] defaultMatch is false before hydratationCompleted

Hey,

I just ran into an race condition with the useMediaQuery hook. If you use this in client side rendering, the first return is false. The component will rerender immediately due to the useEffect and will show the correct value.

I think, this is a bad behavior, because a useMediaQuery will most likely change the component, which causes a lot of unnecessary rerenders.

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

It should render once and return the correct value.

Current Behavior 😯

It renders twice and returns the wrong value in the first place.

Steps to Reproduce 🕹

Link: https://stackblitz.com/edit/react-fcrunc

1. Load the site and open the console. Site shows the actual state. Console shows all history states.

Context 🔦

I want to create a defaultValue for a hook to decide, if I want to show a Sidebar or not. My default value is false the entire time due to this bug.

Your Environment 🌎

Tech	Version
Material-UI	v3.9.1
React	16.7.0-alpha2
Browser	Chrome 71 and Firefox 64
TypeScript	3.2.4

[artegen]

There’s a nasty case with this unfrequent option. I needed to set drawer initial state open on desktop, and hidden on mobile. I did this:

 const matchesDown600 = useMediaQuery('(max-width:600px)');
  
 const initialOpen = matchesDown600 ? false : true;
 const [open, setOpen] = React.useState(initialOpen);

The issue with useMediaQuery jumping from one state to another hasn’t bitten me before. But here it doesn’t work, the initial state is set, and I don’t see a good alternative to correct it when matchesDown600 is updated.

I also tried but didn’t find a good way to go with a class component (you could use the componentDidMount). There you can’t have this hook. This component is the layout, so no props passed from above.

Correcting to this works:

 const matchesDown600 = useMediaQuery('(max-width:600px)', { noSsr: true });

[johannwagner]

I just found my problem. I need to set noSsr in the options object as I’m not doing server-side rendering. This is not very intuitive and will lead to many bugs. We may want to change this behavior. ~noSsr is also missing on the typing for the options object.~

The documentation: https://next.material-ui.com/components/use-media-query/#client-side-only-rendering