Is using styled-components slows down the web app more than stylesheets do?
If I care about the performance and don't have any styles that depend on props, should I just ditch styled-components and use stylesheets instead?
styled-components was already one of the fastest CSS-in-JS libraries out there, but with this v5 update we solidified our position ahead of the pack: Mounting a deep component tree benchmark. Lower is better. These massive speed gains were mainly enabled by our new core stylesheet engine.
Advantages of using Styled-components Below are some of benefits of using styled-components: Eliminates class name bugs: styled-components provide unique class names for your styles, thus eliminating the problems with class names duplications, misspellings, and overlaps.
Comparing styled-components to Emotion When it comes to writing CSS for JavaScript, both styled-components and Emotion are highly efficient, perform well, and have a dedicated developer base that use each library for specific purposes.
Styled Components are really good. As I said before, passing JS variables as well as the global theme are amazing features. When you build a big app where optimization is crucial, this library will probably fulfill your needs. In our case though, migration to SCSS hit the jackpot.
When you have lot of little components, using styled-component rendered, at the same time, the performance overhead can be meaningful. Definitely worth testing to remove styled-component on small elements.
I was using styled-component on a table cells/rows, that can generate 27260 span
(cell) at once. Using React profiler, my table took around 1050-1250ms to generate, it went to 600-630ms once I remove styled component from rows and cells.
There will always be some overhead for a runtime CSS-in-JS library since it's ultimately doing more work. But for that overhead you're also getting a lot of flexibility and power.
Every release we have improved the performance of the library, to the point where the difference is relatively imperceptible (especially when server-side rendering.)
It's entirely up to you to choose which implementation makes the most sense for your project; if all your styles are actually static, then a pure CSS approach will definitely be the most performant. But, that comes with its own caveats in terms of managing your stylesheets, writing efficient selectors, and such.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With