Portal Memory Leak - Any portal opened remains in memory

[Niallith]

Bug Report

Memory Leak with any component using Portal (Popup, Modal, etc...)

Steps

• With Chrome
• Go to the most basic Portal example
• https://codesandbox.io/s/u3j3w?module=/example.js
• Open the browser link
• https://u3j3w.csb.app/
• Perform an Allocation instrumentation on timeline

• Hit Open/Close Portal many times
• Do a Collect garbage then stop recording

Expected Result

Should not still have trace of all the portals opened during the record

Actual Result

Seems like all the portals previously opened remain in memory

Version

2.0.1

Testcase

https://codesandbox.io/s/u3j3w?module=/example.js

[welcome]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[layershifter]

Thanks for reporting, but I haven't seen anything related to SUIR in snapshots, there is also no detached elements.

Few insights from our previous memory investigations:

• use production builds with unminified symbols, for example react-scripts build --profile as CodeSandbox can have own leaks
• press multiple times on garbage collector 👍

I captured two snapshots:

The single difference that I can see, it's growing amount of HTML*Element. The single visible reference that I can find points to React internals and FiberNode (it can be visible on unminified builds):

This looks related to facebook/react#16087 (see facebook/react#16087 (comment)) and a missing cleanup of FIbers facebook/react#18690. We also met this issue in Fluent UI.

---

Please correct me if I am wrong or missed something 🤔

[Niallith]

Probably sure it's not related to semantic-react. It's strange you can't reproduce though 😢

I did more test with a production build, just using the PortalExamplePortal from semantic-react documentation
https://react.semantic-ui.com/addons/portal/#types-portal

I took those snapshots after opening/closing 30 Portal and I did hit collect garbage many times before 😄

I did a record performance/memory also:
Opening/closing Portals about 20 times, garbage collect, did this 3 times and got this result:

[Niallith]

For example, I reproduce the same thing on Totoro (popup rating example), which create a Portal too.
If you hover/leave many times, the memory uses keep increasing in chrome (shift+escape)

When recording performance:

[Niallith]

Well, never mind, I don't think my tests are relevant. At some points, React seems to clear those nodes.