Performance

✏️ Edit this page

Emotion is a highly performant library and will not be a performance bottleneck in most applications. That said, if you are experiencing poor performance, the tips on this page can help. As always, remember the golden rule of programming: premature optimization is the root of all evil!

The first step in improving your app's performance is to profile it using the React DevTools. Use the profiler results to determine whether the slowdown is caused by Emotion or something else.

If Emotion-related code is indeed slowing down your app, here are some optimizations you can attempt:

Reduce the frequency at which your components render using React.memo and other standard optimization techniques.
Reduce the number of component instances that use Emotion. For example: suppose you need to render 10,000 instances of a component that uses the css prop. Emotion has to do a small amount of work for each of the 10,000 component instances. A more performant approach is to use the css prop on a single parent element, using a CSS selector to target each of the 10,000 elements with the same piece of CSS:
```
render(
  <div
    css={{
      '.my-component': { color: 'red' }
    }}
  >
    {/* render the 10,000 instances of MyComponent here */}
  </div>
)
```
Use the css prop for static styles and the style prop for dynamic styles. The Best Practices page has more details on this.
Call css on your object style or CSS string outside your component so that the styles are only serialized once instead of on every render. The Best Practices page has an example of this.
Use @emotion/babel-plugin, which peforms some compile-time optimizations to the css prop.