Aggelos Arvanitakis, writing for the Web Performance Calendar 2019 edition:
Besides some of the great advantages CSS-in-JS boasts over traditional CSS, it may still create performance issues in certain apps. In this article, I will attempt to demystify the high-level strategies of the most popular CSS-in-JS libraries, discuss the performance issues they may introduce on occasion and finally consider techniques that we can employ to mitigate them.
Next to a good insight into the problem, I also like the actionable key takeaways this post provides:
- Don’t over-compose styled components
- Prefer “static” components
- Avoid unneeded React re-renders
- Investigate whether a zero-runtime CSS-in-JS library can work for your project
Avoiding re-renders in React is always a good way to go 😉
The unseen performance costs of modern CSS-in-JS libraries in React apps →
No worries: I still prefer to write my CSS using CSS 😉