React Material UI can't find mobile device on first render

user_1896107 0
Viewed 1094

I'm using material ui in my REACT pwa. When i try to open the application in mobile device screen size won't detect at initialization. So my tree will render twice and i see screen blinking with on-the-fly responsive changes.

import { useMediaQuery, useTheme } from "@material-ui/core";
import { useRef } from "react";

export default function App() {
    const theme = useTheme();
    const isMobile = useMediaQuery(theme.breakpoints.down("xs"));

    const render=useRef(0);

    console.log(++render.current);
    console.log('material answering to is mobile:',isMobile)

    return (
        <div/>
    )
}

enter image description here

Is there something i don't know about it?

material-ui reactjs responsive
1 Answers

according to the doc, MediaQueries accept two arguments:

useMediaQuery(query, [options]) => matches

and one of its options is noSsr which is:

options.noSsr (Boolean [optional]): Defaults to false. 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 comes with a drawback. It's slower. You can set this flag to true if you are not doing server-side rendering.

As a result, if you want to prevent this behaviour, set it to true as below:

const isMobile = useMediaQuery(theme.breakpoints.down("xs"), {
    noSsr: true
  });

working example in sandbox

user_117669470
Related