When I refresh the page useMedia will break my UI (Remove css)

[jemink]

I implemented useMedia() from react-use so when I check desktop to mobile then it is working fine but when I refresh on mobile then it will remove my css

**
import React, { FC } from 'react'
import { useMedia } from 'react-use'

const Index: FC = () => {
const isMobile = useMedia('(max-width: 768px)', false);

return (

{isMobile ? (

Mobile View

) : (

Desktop View

)}

)
}

.mobile-view {
background-color: aquamarine !important;
}

.desktop-view {
background-color: red;
}
**

Bug issue video:- https://www.awesomescreenshot.com/video/3078205?key=fd357595486a738f6fff5fea636a7597

Version

• "less": "^3.13.0"
• "react": "17.0.1"
• "react-use": "^17.1.1"
• "next": "10.0.7"

[jemink]

In above video you can see that when I refresh on the mobile view it will apply style of desktop view that is background-color: red;

[nghiepdev]

@jemink

Maybe it's because of React 16's new SSR strategy? facebook/react#10591.
And in PR useMedia - initialize state with call to media query make initialize state difference on server and client.

[garryburch]

Same issue here

[arifintajul4]

same to me

[mvshmakov]

Shouldn't this issue be closed with #2216?