Emotion and styled-components generate styles at runtime — is this a problem? When does it start to hurt? What are the alternatives with better performance?

Emotion and styled-components indeed generate CSS at runtime, meaning styles are created and inserted into the DOM during application execution. This can lead to some performance issues:

• Loading time: during the first render, styles are generated and inserted, which can increase page load time.
• Repaints: dynamic style changes can cause additional load.
• Bundle size: libraries add their runtime code.

When does this become problematic:

• In large projects with many components and complex styles.
• When fast loading is critical (e.g., for SEO or mobile devices).
• If the application is highly interactive and frequently changes styles.

Alternatives with better performance:

• CSS Modules: styles are compiled at build time, minimizing runtime.
• Tailwind CSS: utility-first CSS with classes generated in advance.
• Static extraction: some CSS-in-JS libraries (e.g., Linaria, Vanilla Extract) allow extracting CSS at build time rather than at runtime.

Example of using CSS Modules:

import styles from './Button.module.css';

function Button() {
  return <button className={styles.primary}>Click me</button>;
}

Thus, if performance and minimizing runtime are important, consider approaches that generate styles at build time rather than at runtime.