react React retains component references to old renders causing browser memory to increase

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.

Screen Shot 2020-02-24 at 1 17 42 PM Screen Shot 2020-02-24 at 1 21 30 PM

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

Feb 24 '20 20:02 tsjohns9

Does https://github.com/facebook/react/issues/18066 help?

Feb 25 '20 11:02 jddxf

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.

Feb 25 '20 15:02 tsjohns9

Did you open it in standalone app view? In my test, there was almost no leak.

Feb 25 '20 16:02 jddxf

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.

Feb 26 '20 19:02 tsjohns9

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.

Screen Shot 2020-02-28 at 11 44 42 AM

Feb 28 '20 18:02 tsjohns9

I have deployed the demo here for your convenience

Feb 28 '20 19:02 tsjohns9

I also encountered this problem

Mar 23 '20 10:03 shenzekun

[email protected] [email protected]

I am still seeing the memory leak.

Aug 14 '20 11:08 jianfenkezhan

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).

Jul 23 '21 12:07 Regaddi

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?

Nov 08 '21 16:11 vespasianvs

@Regaddi I can see leaks without React too: https://codesandbox.io/s/ixz0g You could fix the problem by clearing srcObject when removing the video element.

It's actually an issue of chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=969049#c48

Nov 09 '21 14:11 jddxf

React 18 clears up memory more aggressively. Can somebody please check if this is still as severe?

Mar 30 '22 00:03 gaearon

@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 Screen Shot 2022-09-13 at 6 07 40 PM