Material-ui: [useMediaQuery] always returns false first at page-load

[Akuukis]

At pageload, useMediaQuery will return false-negative if it was actually true, instantly forcing a re-render and correctly returning true.

• [x] The issue is present in the latest release.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

There are two ways to formulate it:

• At pageload, useMediaQuery returns false first. Then, if they actually were true from the very beggining, they will force instant re-render, returning true.
• At pageload, useMediaQuery will return false-negative if it was actually true, instantly forcing a re-render correctly returning true afterwards.

That leads to potential double-renders at page-load, impacting performance.

Expected Behavior 🤔

useMediaQuery to return correct value with first time.

Steps to Reproduce 🕹

https://codesandbox.io/s/lively-sky-gl983

Context 🔦

I have a wrapper component that renders either A or B subcomponent based on a media querry, where both A and B are both rather heavy. With this problem, I can't ensure that I will render the right one first time, without wasting time rendering the other.

Your Environment 🌎

See versions on https://codesandbox.io

[oliviertassinari]

@Akuukis Checkout the noSsr option.

[Akuukis]

Thanks, it works with noSsr. But it didn't behave like described:

[..] In order to perform the server-side rendering reconciliation, it needs to render twice. A first time with nothing and a second time with the children. This double pass rendering cycle [..]

Here I demonstrate that it may render once or twice, depending on the query and situation. Do I miss something, or docs should be updated?

[oliviertassinari]

@Akuukis Don't forget that StrictMode might be in the equation.