Difference to react-responsive?

[FBosler]

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]

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!