How best to use this module in a large application?

yocontra / react-responsive

CSS media queries in react - for responsive design, and more.

https://contra.io/react-responsive

MIT License

7.04k stars 298 forks source link

How best to use this module in a large application? #233

Closed iDVB closed 5 years ago

iDVB commented 5 years ago

I'm struggling to understand what the best way to implement this module across a large application where many components need to know which breakpoint they are in.

Assuming we have 40+ components that each need to be able to adjust their layout based on these breakpoints.

Is it really best to have each component using useMediaQuery?

Does this not translate to multiple matchmedia listeners, sometimes multiples of the same listener data?

yocontra commented 5 years ago

@iDVB Don't think you will really have any performance issues with 40+ as long as you are batching renders, I haven't heard of anyone using that many though so really not sure. The best way to find out is to do it and report any issues you have so we can make improvements if needed, but I think you should be fine.

Also RE: duplicate event handlers, IIRC the browser handles deduping these if the query is the same, so you shouldn't have any issues with that. If you run into a case or browser where this needs improvement we can easily do our own deduping.