How Ant Design’s Component‑Level CSS‑in‑JS Boosts Performance

On November 18, 2022, we released Ant Design 5.0, bringing a unique CSS‑in‑JS solution into view.

CSS‑in‑JS Dilemma

In CSS‑in‑JS, a hash is used to confirm whether a style has been inserted. The hash is usually computed by converting the entire CSS block to a hash value. For example, in Emotion you can see style tags with different hash values for each block.

This reveals a long‑standing issue: the code you write is not the final CSS, so each render must serialize the CSS and recompute the hash, adding overhead. When components have complex or many CSS‑in‑JS rules, or styles depend on props, this cost becomes noticeable.

Different CSS‑in‑JS libraries address this in various ways; here we focus on Ant Design’s solution.

Hash Calculation

The problem lies in CSS serialization. Could caching reduce serialization frequency? For application‑level CSS‑in‑JS, finding a suitable cache key is hard, but for a component library the styles are relatively stable. Based on the style structure from v4 and earlier, a component’s style does not change under the same theme variables and version. Thus only changes to theme variables or Ant Design version affect the style.

We therefore compute a simple hash per component:

All Ant Design components share the same hash. Consequently, we only compute the hash based on the current version (from package.json) and theme variables (from context), avoiding heavy CSS serialization and greatly reducing performance cost.

Component Cache

With the component‑level approach, we can further optimize by caching component styles.

In Ant Design, a component’s style is “complete”; all variants are included. Therefore, a component’s props do not affect its style—a crucial point because in application‑level CSS‑in‑JS, props can trigger style regeneration on each render.

By adopting a component‑level scheme, we can cache styles per component:

When the hash is identical, the same component’s style is generated only on the first mount; subsequent renders hit the cache, providing a second layer of protection.

Benchmark

At the Ant Design 5.0 launch, we performed a benchmark to compare performance with other libraries. The benchmark generated a long, immutable style sheet to test basic usage performance.

In the component‑level scenario, Ant Design shows performance advantages in both initial and subsequent renders. Styled‑components performs well on the second render due to its optimizations, but when props influence style calculation, it suffers the same re‑computation cost as Emotion.

Limitations of the Component‑Level Approach

While Ant Design’s component‑level CSS‑in‑JS can outperform Styled‑components and Emotion in its optimized scenario, it is not universally superior. The approach requires developers to provide stable hashes and unique component names, which adds management overhead. For typical applications, automatic hash generation (e.g., CSS Modules) may be more appropriate, and caching many components can be costly to maintain. Therefore, we recommend using a component‑level CSS‑in‑JS scheme primarily within component libraries.