Incorrect behaviour with multiple media queries
Panda-ref opened this issue · 1 comments
Panda-ref commented
import { useMediaQuery } from "react-responsive";
export default function App() {
const isMobile = useMediaQuery({ maxWidth: 599 });
const isTablet = useMediaQuery({ minWidth: 600, maxWidth: 899 });
const isDesktop = useMediaQuery({ minWidth: 900 });
console.log(isMobile, isTablet, isDesktop);
return null;
}
If you resize it both ways you can see there is always one extra update with incorrect state (all tree queries don't match or two of them match in the same time). Tried with both latest 9.0.0-beta.10 and 8.2.0
false false false
false true false
true true false
true false false
https://codesandbox.io/s/multiple-media-queries-fd0w5z?file=/src/App.js
gabrielmicko commented
Hey @Panda-ref I have the same issue, may I know why did you close this issue?