Repository: react
Issue: React retains component references to old renders causing browser memory to increase
Labels: Type: Needs Investigation

<!--
  Please provide a clear and concise description of what the bug is. Include
  screenshots if needed. Please test using the latest version of the relevant
  React packages to make sure your issue has not already been fixed.
-->

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](https://user-images.githubusercontent.com/24981281/75188107-c97d2c00-5708-11ea-95dd-7320d75cbf99.png)
![Screen Shot 2020-02-24 at 1 21 30 PM](https://user-images.githubusercontent.com/24981281/75188095-c2eeb480-5708-11ea-9ede-c6f29452dde5.png)

## Steps To Reproduce
1. View the app [here](https://tsjohns9.github.io/react-memory-leak/)
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
![Screen Shot 2020-02-24 at 1 26 19 PM](https://user-images.githubusercontent.com/24981281/75188470-6c35aa80-5709-11ea-956b-61022e80fa4b.png)

Link to code example: https://tsjohns9.github.io/react-memory-leak