1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
---
title: 'Performance'
---
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:
```tsx
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](/docs/best-practices#use-the-style-prop-for-dynamic-styles) 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](/docs/best-practices#consider-defining-styles-outside-your-components) has an example of this.
- Use [@emotion/babel-plugin](/docs/babel.mdx), which peforms some compile-time optimizations to the css prop.
|
