Rendering Swagger UI in a React app causes a memory leak

[linelson]

Q&A (please complete the following information)

• OS: Windows 10
• Browser: Chrome 70.0.3538.110
• Version: 70.0.3538.110
• Method of installation:
• Swagger-UI version: Any recent
• Swagger/OpenAPI version: [e.g. Swagger 2.0, OpenAPI 3.0] Not relevant

Content & configuration

Conditionally rendering the Swagger UI in a React application when rendering the Swagger UI per the recommendations in #3000 and per the sample repo https://github.com/shockey/swagger-ui-cra for Create React App causes a memory leak.

Conditionally rendering just the Swagger UI's root div rather than a component that creates the Swagger UI instance in ComponentDidMount is not a viable alternative because on a subsequent re-render, the Swagger UI will not be displayed (which is expected).

This is a pretty common use case in React so it seems like there should be either (a) a way for the parent app to clean up the Swagger UI's memory, perhaps in componentWillUnmount or (b) The Swagger UI should handle this case itself somehow

I've forked the demo of using the Swagger UI with Create React App and added a toggle button to demo the memory leak here:
https://github.com/linelson/swagger-ui-cra/blob/master/src/App.js

Example Swagger/OpenAPI definition:

The default petstore definition is sufficient.

Swagger-UI configuration options:

See https://github.com/linelson/swagger-ui-cra/blob/master/src/App.js

Describe the bug you're encountering

Conditionally rendering the Swagger UI (or the Swagger Editor) in the context of a simple React application creates a memory leak.

To reproduce...

See the screenshots below for examples.
Repo: https://github.com/linelson/swagger-ui-cra

Steps to reproduce the behavior with Redux Dev Tools:

1. Clone the linked repo and run the app
2. Have Redux dev tools installed and look at the Swagger UI state.
3. Click the 'Toggle Swagger UI' button a couple of times
4. Look at the Swagger UI state in Redux dev tools. Note that there are now n instances of the Swagger UI redux state, where n is the number of times the 'Toggle Swagger UI' button was clicked.

Steps to reproduce the behavior with Chrome dev tools:

1. Clone the linked repo and run the app
2. Take a memory snapshot before clicking anything on the app page
3. Click the 'Toggle Swagger UI' button a couple of times
4. Take another memory snapshot
5. Note the increase in memory use

Expected behavior

No memory leak, per #3000 (comment) 😛

Screenshots

Every time the 'Toggle Show UI' button is clicked another redux state is initialized (and never cleaned up):

Clicking the button repeatedly also results in a pretty dramatic memory increase using chrome's memory snapshot:

Snapshot 3 was taken on a clean refresh of the page. Snapshot 4 was taken after clicking the 'Toggle Swagger UI' button a couple of times.

[shockey]

Thanks for the report, @linelson.

I have a hunch that the Redux store persisting may be due to Redux Dev Tools itself... but there does seem to be a memory leak in play here. I'll dig in soon!

[yolohello12]

@shockey Any update on this or can expect anything soon?

[B3nnyL]

I noticed the same issue during development. Is there any solution?

[jackkav]

We hit this and came up with a fix over here Kong/insomnia#5440