@@ -5,6 +5,9 @@ import { CacheProvider } from '@emotion/react';
5
5
import createCache from '@emotion/cache' ;
6
6
import { StyleSheet } from '@emotion/sheet' ;
7
7
8
+ // To fix [Jest performance](https://github.com/mui/material-ui/issues/45638).
9
+ const cacheMap = new Map ( ) ;
10
+
8
11
// Need to add a private variable to test the generated CSS from Emotion, this is the simplest way to do it.
9
12
// We can't test the CSS from `style` tag easily because the `speedy: true` (produce empty text content) is enabled by Emotion.
10
13
// Even if we disable it, JSDOM needs extra configuration to be able to parse `@layer` CSS.
@@ -98,10 +101,15 @@ function getCache(injectFirst, enableCssLayer) {
98
101
99
102
export default function StyledEngineProvider ( props ) {
100
103
const { injectFirst, enableCssLayer, children } = props ;
101
- const cache = React . useMemo (
102
- ( ) => getCache ( injectFirst , enableCssLayer ) ,
103
- [ injectFirst , enableCssLayer ] ,
104
- ) ;
104
+ const cache = React . useMemo ( ( ) => {
105
+ const cacheKey = `${ injectFirst } -${ enableCssLayer } ` ;
106
+ if ( cacheMap . has ( cacheKey ) ) {
107
+ return cacheMap . get ( cacheKey ) ;
108
+ }
109
+ const fresh = getCache ( injectFirst , enableCssLayer ) ;
110
+ cacheMap . set ( cacheKey , fresh ) ;
111
+ return fresh ;
112
+ } , [ injectFirst , enableCssLayer ] ) ;
105
113
return cache ? < CacheProvider value = { cache } > { children } </ CacheProvider > : children ;
106
114
}
107
115
0 commit comments