useMediaQuery not matching any breakpoint

[rebyul]

I'm using the example implementation of useWidth to get the breakpoint width of my page, and since @material-ui/core v4.2.3, the useMediaQuery hook doesn't match any theme breakpoint when navigating between pages: it returns the default value 'xs' on first render.

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

Current Behavior 😯

Example useWidth hook returns 'xs' on the first page re-render even though there hasn't been a width change

Expected Behavior 🤔

Example useWidth hook should not return xs on first call when the width hasn't changed

Steps to Reproduce 🕹

https://codesandbox.io/embed/cocky-bush-d8beh?fontsize=14&hidenavigation=1&theme=dark
Steps:

1. Check console log on home page
2. Navigate to about page
3. Notice console log outputting 'xs' then 'md' or 'sm'
4. Navigate to the home page, which again outputs 'xs' then 'md' or 'sm'

Context 🔦

Your Environment 🌎

Tech	Version
Material-UI	v4.7.2
React	latest
Browser	chrome 79.0.3945.79 (Official Build) (64-bit)
TypeScript	3.7.3
etc.

[oliviertassinari]

@rebyul This is the expected behavior. The hooks resolve one after the other.

[oliviertassinari]

The behavior changed after #18683.