emotion-js / emotion

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

cache.sheet.hydrate(nodesToHydrate)

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.

Browser leaves duplicated style node when using ssr