Description
React version: 16.12.0
Link to deployed demo app - https://tsjohns9.github.io/react-memory-leak/
Link to demo repo - https://github.com/tsjohns9/react-memory-leak
The current behavior
React appears to retain references to old renders of components which prevents the browser from running the garbage collector on unused memory.
The expected behavior
React should release the memory of components from previous renders
Description
I have a web app that imports an OAS 3/Swagger 2.0 json spec file, and renders the file using the swagger-ui component, https://github.com/swagger-api/swagger-ui.
These json files can be very large. If I upload a file that is 500kb and pass it into the swagger-ui component the heap snapshot in chrome will show about 32.6 MB being used to render the app.
At some point during the lifecycle of this component the spec file may be updated by a user. When this happens the swagger-ui component will re-render. Between re-renders I can see from my heap snapshot that about 15 more mb are added to the heap.
Even if this component is completely unmounted, the memory is still retained and cannot be garbage collected.
I would expect that after a re-render the heap size would be about the same, and the old references would be released for garbage collection.
I have come here with this issue and not swagger-ui because based on the heap snapshots the detached DOM elements are being retained by React directly.
The spec file that I have used is about 500kb. Unfortunately it is a proprietary file and I cannot share it here. Instead, I have provided a spec file from swagger-ui. This file is much smaller, but it will serve the purpose of showing how react is retaining references to old component renders. In my situation since the file is so large this becomes much more apparent to the user that there is a problem than with a much smaller json file.
Steps To Reproduce
- View the app here
- Open the console, and take a heap snapshot
- Press the Update Spec button in the top left of the app, or the Unmount button
- Take another heap snapshot.
- You will see that the heap size has increased
- Compare the two heap sizes and check to see how many new detached objects there are. Here is a screenshot as an example
Link to code example: https://tsjohns9.github.io/react-memory-leak
Activity
jddxf commentedon Feb 25, 2020
Does #18066 help?
tsjohns9 commentedon Feb 25, 2020
That issue seems similar. I downloaded the version that was linked for the fix here as part of #17666, but I am still seeing the memory leak.
jddxf commentedon Feb 25, 2020
Did you open it in standalone app view? In my test, there was almost no leak.
tsjohns9 commentedon Feb 26, 2020
The issue I have seems different than the one you have linked too. I am still working to more closely identify what is happening. I will post back here when I know more about what is happening.
tsjohns9 commentedon Feb 28, 2020
The running version of react now in the sample app is 0.0.0-241c4467e, which is the same version from the app you linked to. This version has helped with the leak a lot, but I am still seeing a problem with detached dom elements. Go to the deployed demo app here, and take a snapshot. Press the mount button. Take another snapshot. Then unmount and take another snapshot. You will see that the component is no longer in the dom, and yet the memory hardly went down. It looks to me like React is holding onto these elements and is the source of the leak.
This screenshot is from a CRA. I ran a yarn build and had the app running in a private tab to make sure the dev tools weren't holding onto anything extra, and I am still seeing a leak. Please correct me though if I am wrong on that because I can see further down the retainer tree that there is a function called fetchJSON, which I know isn't coming from React.
tsjohns9 commentedon Feb 28, 2020
I have deployed the demo here for your convenience
shenzekun commentedon Mar 23, 2020
I also encountered this problem
jianfenkezhan commentedon Aug 14, 2020
react@16.13.1
react-dom@16.13.1
I am still seeing the memory leak.
Regaddi commentedon Jul 23, 2021
Here is a minimal reproduction demonstrating the issue on a
HTMLVideoElement:https://codesandbox.io/s/upbeat-butterfly-vchn2?file=/src/App.js
Using react and react-dom 17.0.2.
I was testing in Chrome 92.0.4515.107 on macOS Big Sur 11.4 (20F71).
vespasianvs commentedon Nov 8, 2021
Just wondered if there had been any progress on this issue? Also experiencing it as an issue on our app which eventually causes the browser to run out of memory. Is there even a temporary workaround?
jddxf commentedon Nov 9, 2021
@Regaddi I can see leaks without React too:
https://codesandbox.io/s/ixz0g
You could fix the problem by clearing
srcObjectwhen removing the video element.It's actually an issue of chromium:
https://bugs.chromium.org/p/chromium/issues/detail?id=969049#c48
gaearon commentedon Mar 30, 2022
React 18 clears up memory more aggressively. Can somebody please check if this is still as severe?
miklosme commentedon Sep 14, 2022
@gaearon We had a memory leak bug report. Although I couldn't reproduce a crash, I saw a lot of uncollected FiberNodes in the memory profiler. After a 17.0.2 -> 18.2.0 upgrade it looks significantly cleaner now:
17.0.2
18.2.0
phunguyen-finn commentedon May 26, 2025
Hi, I got this issue on React 17.0.2. Is there any further progress on this one?