8000 React retains component references to old renders causing browser memory to increase · Issue #18116 · facebook/react · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content
React retains component references to old renders causing browser memory to increase #18116
Open
@tsjohns9

Description

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

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

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
    Screen Shot 2020-02-24 at 1 26 19 PM

Link to code example: https://tsjohns9.github.io/react-memory-leak

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      0