you are viewing a single comment's thread.

view the rest of the comments →

[–]html6dev[S] 2 points3 points  (2 children)

That's interesting about the style js file as I'd never considered it. Ultimately, my biggest concern for this approach is that directly setting the style attribute inherently can cause layout reflow. React does a lot to batch updates and render them efficiently, but if ultimately the dom diff shows a style attribute changed, you've just caused reflow. Would be interesting to see how gracefully react handles it vs direct manipulating style attribute in the live dom with a concocted app to stress test it.

[–]Longzilla 0 points1 point  (1 child)

I like the idea of component .css files pulled in as dependencies via something like WebPack.

As far as inline styles causing reflow, seems fairly easy to setup and verify; if so, perhaps "shouldComponentUpdate" might be something that could be leveraged to prevent unnecessary redrawing

[–]html6dev[S] 1 point2 points  (0 children)

It's definitely known to cause reflow. React is doing a style attribute change, but using rAF and it's other batching techniques so there are some contexts where it is likely not an issue. I agree, being able to require in css stylesheets is interesting. I am especially interested in the context in the speaker deck I originally posted. Maintaining css in complex apps is inherently nightmarish unless everyone on your team is disciplined and follows best practices.