Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How styled-components affect performance?

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?

like image 727
shakhbulatgaz Avatar asked Nov 29 '18 12:11

shakhbulatgaz


People also ask

Are styled-components fast?

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.

Is it good to use styled-components?

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.

Are styled-components efficient?

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.

Are styled-components bad?

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.


2 Answers

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.

like image 163
Ambroise Rabier Avatar answered Nov 23 '22 06:11

Ambroise Rabier


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.

like image 41
probablyup Avatar answered Nov 23 '22 05:11

probablyup