useMediaQuery return wrong width

[siriwatknp]

I found that useMediaQuery has some glitch when screen changes from big to small

• 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 🤔

useMediaQuery should return correct width when screen changes

Current Behavior 😯

When the screen change from large to small, there is one event that useMediaQuery return false

Steps to Reproduce 🕹

try this sandbox, I copy useWidth from the doc here

look at the console, stretch screen until you see "md" then narrow it. You will see one "xs".
https://codesandbox.io/s/material-ui-layout-v10-b4wil

Tech	Version
Material-UI	v4.1.3
React	16.8.6
Browser	chrome

[oliviertassinari]

@siriwatknp This is a limitation of the current implementation of the demo. You can find a version that is free from this glitch in #16127 but it relies on a private API.

Do you really need this useWidth logic? It's mostly documented for migration purposes, it's not the encourage default approach.

[siriwatknp]

Actually, I only need a hook that return me the current width of the screen. I thought useWidth is something similar to withWidth. What is your suggestion?

[siriwatknp]

The glitch is from useWidth logic or it is from useMediaQuery. I think the latter is the reason.

[oliviertassinari]

The glitch comes from the useWidth demo usage. Can you work around the problem with a different usage strategy of useMediaQuery?

[siriwatknp]

But I think the glitch is in useMediaQuery.
Take a look here. https://codesandbox.io/s/material-ui-layout-v10-b4wil
I change useWidth logic to something very simple. I keep resizing the screen but it still return null which means useMediaQuery return false for every breakpoint?

[oliviertassinari]

@siriwatknp Nothing surprising from my perspective. I'm not aware of any guarantee in the order the different hooks will resolve. We might end up in an intermediary state where no media query matches.

[eps1lon]

Couldn't quite reproduce it though I did get the occasional null.

Wouldn't it make more sense to check if the screen size is above a certain breakpoint and the return the biggest one. For example:

function useWidth() {
  const theme = useTheme();
  const isXs = useMediaQuery(theme.breakpoints.up("xs"));
  const isSm = useMediaQuery(theme.breakpoints.up("sm"));
  const isMd = useMediaQuery(theme.breakpoints.up("md"));
  const isLg = useMediaQuery(theme.breakpoints.up("lg"));
  const isXl = useMediaQuery(theme.breakpoints.up("xl"));
  if (isXl) return "xl";
  if (isLg) return "lg";
  if (isMd) return "md";
  if (isSm) return "sm";
  if (isXs) return "xs";
  return null;
}

Solves the issue of holes between the intervals which removed the occasional null for me.

@siriwatknp Could you try that implementation and see if it solves your issue?

[oliviertassinari]

@eps1lon I confirm your proposal, it works better with :)

diff --git a/docs/src/pages/components/use-media-query/UseWidth.js b/docs/src/pages/components/use-media-query/UseWidth.js
index b727d4be2..4de165a40 100644
--- a/docs/src/pages/components/use-media-query/UseWidth.js
+++ b/docs/src/pages/components/use-media-query/UseWidth.js
@@ -14,7 +14,7 @@ function useWidth() {
   return (
     keys.reduce((output, key) => {
       // eslint-disable-next-line react-hooks/rules-of-hooks
-      const matches = useMediaQuery(theme.breakpoints.only(key));
+      const matches = useMediaQuery(theme.breakpoints.up(key));
       return !output && matches ? key : output;
     }, null) || 'xs'
   );

[siriwatknp]

@eps1lon yes, that worked! thanks a lot.

[oliviertassinari]

I'm reopening so we don't forget to update the demos. I will give it a go.

[siriwatknp]

@oliviertassinari if you don't mind, I will update the demo and send a PR

[oliviertassinari]

@siriwatknp Oh, yes, that would be awesome :)