search

flexdinesh / react-socks

🎉 React library to render components only on specific viewports 🔥
MIT License
426 stars 29 forks source link

Component Flashes on Screen #19

Open leadhkr opened 5 years ago

leadhkr commented 5 years ago

I've tried out your library for a react project of mine and it seems to work with the breakpoints, however, regardless of the width, the components will always flash on the screen then disappear. For example:

        <Breakpoint xlarge up>
          <SearchBar />
        </Breakpoint>

For the above code, I want the search bar to render only for screens larger than xlarge. When the screen size is small (mobile), the SearchBar flashes on the screen then disappears. Which tells me that, while the library is adhering to the screen sizes, it is still rendering the component and then unmounting it.

Is there a fix for this?

flexdinesh commented 5 years ago

@sagarpatel8384 Can you add more info about the project in which you are using this lib?

This might happen if you're server rendering your React code. The lib has to have a default for Server Render when there are no event listeners (server side). Right now, XL is the default if there is no event listener (server render).

Maybe we can build an option to configure default for server render so folks can use a different default for different server renders (ex. m.site.com can use mobile as default and site.com can use desktop as default).

Pl add more info on the code where this lib is used and we'll see if it is a code issue or a known SSR problem.

thedern commented 5 years ago

We have the same flicker/flashing issue as we are attempting to use this package with Next.js

flexdinesh commented 5 years ago

This is definitely default desktop fallback for SSR. I'll try to wrap something that makes the default configurable (desktop/mobile/nothing).

twhite96 commented 4 years ago

This is still an issue. I'll try to take a look to see if I can help out.

flexdinesh commented 3 years ago

A potential work around for this is to use the setDefaultWidth API merged in #44 and published in version 2.2.0.