Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Add matchMedia listener based alternative to Hide component

See original GitHub issue

Based on some discussions with @sdalonzo, it might make sense to include an alternative to the Hide component that would allow for conditional rendering based on media query, rather than relying on CSS display: none. This might make use of the context API to use a global listener and context consumers to control rendering.

Other libraries for reference:

Issue Analytics

State:
Created 5 years ago
Comments:6

Top GitHub Comments

1reaction

zephraphcommented, Nov 16, 2018

We’ve been specifically dealing with the fallout of hydration failures when SSR markup doesn’t match initial client renders. React’s docs specifically calls it out as an error when the markup doesn’t match. React 16 doesn’t throw out the current tree and completely re-render, but tries to patch it up instead… it can lead to some challenges.

We’re taking sort of a hybrid approach, but most everything relies on display: none. We have a wrapper component that we can flag certain breakpoints to do conditional rendering. It’s a big process, but we’re hoping to launch it to production soon. Once we do maybe we can pop back in and share our learnings.

0reactions

zephraphcommented, Jul 10, 2019

Hey folks! I forgot to follow up with this, but we recently published a blogpost on our experiences with responsiveness/react and some of the challenges we ran into (especially around server side rendering).

Feel free to check it out and shoot us questions if you have any: https://artsy.github.io/blog/2019/05/24/server-rendering-responsively/