styled-components / xstyled

A utility-first CSS-in-JS framework built for React. 💅👩‍🎤⚡️
https://xstyled.dev
MIT License
2.28k stars 105 forks source link

Performance implications of default "x" and multiple style props #235

Closed Makskow closed 3 years ago

Makskow commented 3 years ago

Hi!

I wanted to ask about the potential performance implications when using the default "x", which has a full suite of system styles, compared to a custom "x" with only a few system styles. Also, same question about performance differences when using multiple style props on a component. I've seen an older question about this being already answered, but my findings led me to a different conclusion.

From my investigations with Profiler, it looked like rendering a component built with a custom "x", which had only a few system styles, had better performance than using the default "x". That performance difference was there even when no style props were actually used. At the same time, the more style props I used, the more performance impact it had. This actually prompted me to build components with custom "x" that supports fewer system styles and to also provide static styles as a CSS class, rather than additional style props. I'd then only use style props for dynamic styling.

Am I missing something here and using the library incorrectly, or could there actually be such performance implications in these two cases? :)

gregberge commented 3 years ago

Hello @Makskow, the number of properties on x has no impact on performances. Utilities are indexed and we iterate over component props not utilities, so it should have no impact. Everything is detailed in dedicated page about performances.

Also to be clear, you should not worry about this, xstyled overhead has no significant impact on global app performance.