Browser leaves duplicated style node when using ssr
zombieJ opened this issue · comments
Current behavior:
Hydrate will not de-dup
To reproduce:
Create a styled component and put into page:
const App = () => (
<Button />
<Button />
<Button />
<Button />
<Button />
);
Expected behavior:
It's OK to get duplicated style definition on Server render:
But it should de-dup when hydrate on client side.
Environment information:
react
version: 17.0.2@emotion/react
version: 11.4.1
I think it may same as #2436
emotion/packages/cache/src/index.js
Line 263 in 676a926
I guess hydrate logic do not dedup which makes too many same style keep in the page.
The problem, most likely, is that your components have no common Emotion-aware ancestor. Try wrapping the whole thing in the CacheProvider
- it should help you.
Tried the CacheProvider. Didn't work.
Please always try to share a repro case in a runnable form - either by providing a git repository to clone or a codesandbox. OSS maintainers usually can't afford the time to set up the repro, even if exact steps are given.
Wrapping in CacheProvider has helped in my case:
const myCache = createCache({ key: "cache-key" });
function MyApp({ Component, pageProps }: AppProps) {
return (
<CacheProvider value={myCache}>
<Component {...pageProps} />
</CacheProvider>
);
}
We had this problem with @emotion/react v11.9.0 but it seems to fixed in v11.9.3.