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

[tsjohns9]

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

1. View the app here
2. Open the console, and take a heap snapshot
3. Press the Update Spec button in the top left of the app, or the Unmount button
4. Take another heap snapshot.
5. You will see that the heap size has increased
6. 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

[jddxf]

Does #18066 help?

[tsjohns9]

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]

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

[tsjohns9]

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]

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]

I have deployed the demo here for your convenience

[shenzekun]

I also encountered this problem

[jianfenkezhan]

[email protected]
[email protected]

I am still seeing the memory leak.

[Regaddi]

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]

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]

@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

[gaearon]

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

[miklosme]

@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