search

streamich / react-use

React Hooks — 👍
http://streamich.github.io/react-use
The Unlicense
41.4k stars 3.13k forks source link

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

Open jemink opened 3 years ago

jemink commented 3 years ago

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

jemink commented 3 years ago

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 commented 3 years ago

@jemink

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

garryburch commented 3 years ago

Same issue here

arifintajul4 commented 2 years ago

same to me

mvshmakov commented 1 year ago

Shouldn't this issue be closed with https://github.com/streamich/react-use/pull/2216?