CODEWITHSUNDEEP
javascriptcssreactjs
Giant Elk
Giant Elk

Reputation: 5685

What is faster, raw CSS or inline styles in ReactJS?

Does the ReactJS virtual DOM make your app faster if you put all CSS as inline style? VS using raw .css files?

http://facebook.github.io/react/tips/inline-styles.html

Also see this ReactJS presentation on CSS in JavaScript: https://speakerdeck.com/vjeux/react-css-in-js

Upvotes: 7

Views: 3502

Answers (1)

user217782
user217782

Reputation:

Browsers have put years of efforts into making their CSS stylesheet parsing + rendering engines blazing fast and memory efficient. Inline styles haven't exactly had that same treatment. However the bright side is that it actually doesn't matter much if you're creating normal-sized apps/pages. The difference is miniscule. Inline styles make up for the fact that 100% of the styles are actually used, where CSS stylesheets are often concatenated and almost 90% of the parsed rules are inactive (wasted).

Tip: Improve your performance by avoiding React re-renders. That's where the bottleneck often really is!

Upvotes: 13

Related Questions