xobotyi
Memory leak that causes crash
What is the current behavior?
When a user is dragging scrollbar scroller by mouse (not mouse wheel, it's important!) and the scrollbars component is being removed from the DOM it fails to properly clean event listeners which causes <DraggableCore>: Unmounted during event! error.
Steps to reproduce it and if possible a minimal demo of the problem. Here's the link to an example https://codesandbox.io/s/jolly-silence-seoznl?file=/src/App.js Steps: once the example is loaded grab the scrollbar by mouse and start dragging until timeout removes <Scroll> element from the dom.
What is the expected behavior? Properly clean event handlers to prevent memory leak
A little about versions:
- OS: MacOS Monterey
- Browser (vendor and version): Chrome 98.0.4758.80
- React: 17.0.2
-
react-scrollbars-custom: 4.0.27 - Did this worked in the previous package version? Not sure, probably not
Also, verified similar scenario on the react-draggable itself, the issue is not reproduced here, so I assume it comes somewhere from react-scrollbars-custom. Here's the link for react-draggable sandbox https://codesandbox.io/s/keen-nobel-dxed5h?file=/src/App.js
I could track it down here https://github.com/xobotyi/react-scrollbars-custom/blob/master/src/ScrollbarThumb.tsx#L55 It seems setting elementRef null here prevents DraggableCore to unsubscribe from event listeners