Memory leak with dragDropManager as retainer object

Describe the bug

Possible memory leak with react-dnd.

In a app with react-router-dom when I navigate away of a screen with react-dnd I still see a lot of my models instances, unrelated components (not child neither sibilings of my component containing the DnDProvider) and detached dom elements with references to dragDropManager.

At the current state the memory usage after I leave the screen with the DnD is around 49MB, if I comment out the DND components (which is now as simple as possible: provider + 1 drop zone) it goes to 28MB.

I was able to recreate a small sample which only shows the leak of detached dom elements with the references to dragDropManager.

I couldn’t yet replicate the scenario where multiple components are kept in memory with dragDropManager as retainer object. But here is a picture of the retainer in one of my components:

Reproduction

Video showing the possible memory leak: https://monosnap.com/file/1aKyq523ZkKY1gO39QS05yjBmzEBB0

Steps to reproduce the behavior:

1. Clone https://github.com/canastro/dnd-sample
2. Run sample in production mode with npm run prod
3. Open http://localhost:5000
4. Go to the DND page and navigate back and sometimes between the other two pages
5. Take heap snapshot, check for dettached div elements, and check a retainer related with react-dnd

Expected behavior All references to react-dnd should be cleaned up properly.

Desktop (please complete the following information):

• OS: macOS Movaje
• Browser: chrome
• Version: 76.0.3809.132

[lukemeads]

I can confirm I’m having a similar issue, but with the combination of mobx and react-dnd when remounting drag source’s.

Using the legacy HOC API, I was seeing lastConnectedDragSource in SourceConnector.ts holding onto these detached <div> elements. This change https://github.com/lukemeads/react-dnd/commit/eb2662e70fc706f9ac727be63e2c8a844da88fdc seemed to stop the most significant leak for me. Here’s a repro just changing state to trigger rerenders; https://codesandbox.io/s/wrse8 <Box> seems to be OK, but <LegacyBox> definitely leaks memory.

Using react-dnd hooks, I’m seeing a similar behaviour to OP’s issue. But I couldn’t seem to repro it in a smaller app consistently. It’s unclear where the leak in the hooks API is but I’m seeing dragDropManager as the retainer as well:

[canastro]

I can confirm that this issue has been fixed with version 9.4.0:

Before:

After:

@darthtrevino this is good to close by me.