Managing responsive style (CSS) in React


(Ben Carp) #1

When building in ReactJS I use Sass/Scss for styling. I can achieve my desired style with Sass, and the big advantage it has over styling from within ReactJS (Using the style property of the components and elements), is that it can include media queries.
I’m wondering if the same can be achieved from within ReactJS with the window.innerWidth javascript property. With this property we can get the width of the window, and theoretically manage the style property of each component accordingly. From what I understand changes to the DOM are expensive. But changes to the window.innerWidth, do not have to change the DOM each time the width changes by 1px. We can define a few breakpoints, and the DOM will change only when the window.innerWidth moves between breakpoints.
My questions are: 1. Is such a method being used? 2. Are there any inherent disadvantages for such a method?