Browser leaves duplicated style node when using ssr

[zombieJ]

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

https://github.com/emotion-js/emotion/blob/676a92631ef9c35cfd9f8660cce58aa0f7781528/packages/cache/src/index.js#L263

I guess hydrate logic do not dedup which makes too many same style keep in the page.

[Andarist]

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.

[sgehrman]

Tried the CacheProvider. Didn't work.

[Andarist]

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.

[max-ch9i]

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>
  );
}

[haukurmar]

We had this problem with @emotion/react v11.9.0 but it seems to fixed in v11.9.3.