How styled-components affect performance?

Question

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?

Answer 1

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.

Answer 2

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.