Memory Leak: Dialog component is leaking the last dialog instance

[johannao76]

Bug Report

Dialog component is leaking the last dialog instance

Leak size: ~200KB for the provided example, can be more depending on the actual contents of the dialog.

Steps

1. Go to this link.
2. Open and close the dialog a few times
3. Open chrome dev tools and go to the Memory tab
4. Under Profiles (left nav), select "Allocation instrumentation on timeline" and hit the Start button to start profiling
5. Open and close the dialog several times
6. On the dev tools, force GC by clicking on the trash can in the profiler view (left nav) and stop profiling
7. Review the timeline and notice a bunch of left over react elements from the dialog, i.e., dialog header, footer, buttons, etc

Expected Result

Dialog component should be completely destroy on close.

Actual Result

The last dialog stays in memory. It looks like the button used to trigger opening of the dialog retains a reference to the Dialog portal:

Version

0.43.0

Testcase

Sandbox: https://codesandbox.io/s/66c8p
Direct link: https://66c8p.csb.app/

[miroslavstastny]

This is neither a leak nor a bug in FluentUI.

alternate holds onto the deleted children until the next update

See this post in React repo: facebook/react#17666 (comment)

[johannao76]

@miroslavstastny: Per offline conversations, we should look into adding a workaround to force an empty update on the dialog component when the dialog is closed, so the memory can be released. Can you please reactivate this issue as I don't seem to have access?

[miroslavstastny]

There is nothing we can do with this on library side. Consumer can double-render on dialog close to increase a chance of alternate being released: https://codesandbox.io/s/dialog-double-render-on-close-3vx7x

This issue is not limited to Dialog any component behaves the same: https://codesandbox.io/s/image-component-leak-c78mp

Details: facebook/react#16087
Closing after discussion with @levithomason