Skip to content

Dialog memory leak (detached Dialog.Content) #3202

Open
@mdubourg001

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 the role=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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions