yocontra/react-responsive

Incorrect behaviour with multiple media queries

Panda-ref opened this issue · 1 comments

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

Hey @Panda-ref I have the same issue, may I know why did you close this issue?