could you please explain the use cases when should we use this component instead of using regular css media queries. thanks

[Aman Mavai]

[Edo Rivai]

I'm using it for Server Side Rendering, so I don't render duplicate content.

[Michael Jackson]

There are lots of use cases, but I'll just mention a very basic one. Let's say you wanted to render a <SmallScreen> component when the screen is smaller than 400px, and a <LargeScreen> component when the screen is wider than 400px.

<Media query="(max-width: 399px)">
  {matches => (
    matches ? (
      <SmallScreen/>
    ) : (
      <LargeScreen/>
    )
  }
</Media>

This would allow you to easily decide which component to render based on the screen width.

Hope that helps!

[Edo Rivai]

Oh, just to add to @mjackson. If you would implement something similar using only CSS media queries, you would be forced to render both <SmallScreen />, as well as <LargeScreen />. Deciding which component to render in JS, allows you to prevent that performance hit.

[Kamlesh Chandnani]

@edorivai what you mentioned makes sense. I have a follow up question on how do we optimise for bundlesize? For example when my app is running on a small screen, ideally I shall only load SmallScreen and not load LargeScreen at all unless the screen size changes.

[Edo Rivai]

@kamleshchandnani I think regular bundle splitting with React.lazy() should work.