Open
Description
Bug report
Current Behavior
Every time a Dialog gets opened and then closed, a Detached <div>
element (the Dialog.Content
) gets detached but is never garbage collected, as if a reference was kept, preventing it. This represents a memory leak because opening and closing the dialog 20 times means 20 Detached Dialog.Content
elements as long as their whole tree of children, which makes the memory usage grow.
Expected behavior
No reference should be held with the Dialog.Content
element upon closing to allow proper garbage collection.
Reproducible example
- Go to the following CodeSandbox: https://codesandbox.io/p/sandbox/cool-meadow-h6vftg and click the "Open in a new tab" button at the top right of the Preview tab (or directly open the preview link: https://h6vftg.csb.app/)
- Open the Chrome Devtools, go to the "Memory" tab, and click the "Detached elements" checkbox
- Click the blue "Start" button at the bottom of the panel
- Notice that no element is detached yet (or at least none related to Radix's Dialog)
- Click the "Edit profile" button of the app and close the dialog 4 of 5 times in a row
- Run a new "Memory"/"Detached elements" analysis in the devtools
- Notice multiple
<div>
elements with therole=dialog
attribute get leaked (this is actually the Dialog.Content element)
Suggested solution
Find which reference might not get removed when the dialog gets closed. I tried to search in the sources but am not able to notice anything.
Your environment
Software | Name(s) | Version |
---|---|---|
Radix Package(s) | @radix-ui/react-dialog | 1.1.2 |
React | n/a | ^18.0.0 |
Browser | Google Chrome | 130.0.6723.92 |
Assistive tech | ||
Node | n/a | |
npm/yarn | ||
Operating System | Apple M1 Pro | Sonoma 14.7 |
Activity