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