The unseen performance costs of modern CSS-in-JS libraries in React apps

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:

  1. Don’t over-compose styled components
  2. Prefer β€œstatic” components
  3. Avoid unneeded React re-renders
  4. 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 πŸ˜‰

Published by Bramus!

Bramus is a Freelance Web Developer from Belgium. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.