Given Emotion's Global component is used in a component that is lazy loaded and wrapped in Suspense, and the parent component is rendered upon initial page load, the global styles are not removed when that component is unmounted

[jmca]

Current behavior:

Given Emotion's Global component is used in a component that is lazy loaded and wrapped in Suspense, and the parent component is rendered upon initial page load, the global styles are not removed when that component is unmounted.

Note that when Global is not in a component that is rendered on initial page load (while wrapped in Suspense), global styles are correctly removed when the parent component is unmounted.

Seps to reproduce:

Failing Test Case

Using this example: https://stackblitz.com/edit/react-ts-agivwh?file=App.tsx

• Page initially loads Page1 component
• Notice red body background
• Click on the link "CLICK ME TO PAGE 2"
• Page 2 is now rendered
  • Expected Result
    • Body should be white
  • Actual Result
    • Body is still red
      
• Click on the link "CLICK ME TO PAGE 1"
• Page 1 is now rendered
  • Expected Result
    • Body has 1 red style entry
  • Actual Result
    • Body has 2 red style entries (because the original one was never removed)
      

Passing Test Case

Using the same example at https://stackblitz.com/edit/react-ts-agivwh

• In App.tsx, set the initial value of currentPage to the value of /page2, then reload web view
• Page initially loads Page2 component
• Notice the white background
• Click on the link "CLICK ME TO PAGE 1"
• Page 1 in now rendered
• Notice the red background
• Click on the link "CLICK ME TO PAGE 2"
• Page 2 is loaded
• Notice the white background

Global body style was correctly added and removed.

---

I tested this in an example without using suspense and everything works as expected following the same steps above

https://stackblitz.com/edit/react-ts-xwa9w5?file=App.tsx

---

[Andarist]

I think that this is actually a React issue, you can find the tracking ticket here. I'm not sure if as such it's worth fixing it in Emotion - especially since there is actually no clear way of dealing with this situation. I guess that we could track disconnecting/reapparing of those components through a combination of useInsertionEffect+useLayoutEffect... but that's an ugly workaround 😬 I could consider accepting a PR with such a fix though.

[lpolito]

Just ran into this, and came to the same conclusion as suggested by @Andarist

I could see creating a flag to bypass this, possibly, but yeah, it's ugly.

Any chance you just use useLayoutEffect (or an isomorphic variant to support SSR) instead?

[tien]

I'm also getting this a lot recently after I start using suspense.

[zuyetawarmatik]

Bump up the issue, as we lazy component for every react-router route, and the GlobalStyles's sheet isn't flushed (removed) when the component is unmounted (route change), affecting the style of subsequent pages

[Andarist]

What version of React are you on? I think this was fixed by facebook/react#30954

[zuyetawarmatik]

@Andarist That PR is on Sep 2024, which is likely on React 19. We're still on React 18.3.1 (Apr 2024) and doesn't intend to upgrade to React 19 yet due to some legacy code.

[Andarist]

That is understandable - but I don't have a good way to workaround this on our side. And given the bug is fixed upstream, it's a reasonable resolution of this issue (in my eyes) to call it fixed.