New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Difference to react-responsive? #70

Closed
FBosler opened this Issue Jul 19, 2017 · 1 comment

Comments

2 participants
@FBosler
Copy link

FBosler commented Jul 19, 2017

Not really an issue but something that bothers me (and I think other people as well). When doing a quick search for responsiveness in react react-media and react-responsive (https://github.com/contra/react-responsive) come up. So I checked both github pages out, and from what I can tell both libraries look rather similar in what and how they do it.

So I think it would be worthwhile to include some information on what the differences are and for which use cases react-media is better ....

@mjackson

This comment has been minimized.

Copy link
Member

mjackson commented Nov 29, 2017

react-responsive works like an if statement. You create all of the elements inside their <MediaQuery> component, and then it decides whether or not it'll actually render those children to the page. In other words, like this:

<MediaQuery>
  {/* These elements are _always_ created */}
  {/* Even when the media query doesn't match :( */}
  <p />
</MediaQuery>

However, when the media query does not match you still create all of those elements, but essentially discard them when none of them are rendered to the page.

In contrast, react-media takes a different approach by using a render prop to conditionally create elements only when the media query matches, which saves you creating all those element objects when it doesn't, so it's a lot more efficient.

<Media render={() => (
  <div>
    {/* These elements are only created when the query matches! */}
    <p />
  </div>
)}/>

Hope that helps!

@mjackson mjackson closed this Nov 29, 2017

@ReactTraining ReactTraining deleted a comment from contra Dec 1, 2018

@ReactTraining ReactTraining deleted a comment from ken0x0a Dec 1, 2018

@ReactTraining ReactTraining locked and limited conversation to collaborators Dec 1, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.