[SOLVED] How styled-components affect performance?

Issue

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?

Solution

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.

Answered By – probablyup

Answer Checked By – Mildred Charles (BugsFixing Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *