Memory Leak

[GlennGeenen]

We use react-sizeme in a large application and resizeDetector stays in memory (it is a singleton). The result is that all react-sizeme children stay in memory and the retained memory from resizeDetector becomes larger and larger. We forked react-sizeme to create resizeDetector in the wrappedComponent so that resizeDetector is removed when the wrappedComponent is unmounted.

Do you have a reason to keep the resizeDetector as a singleton?

[ctrlplusb]

Hey @GlennGeenen, thanks for raising this!

Interesting that you are experiencing memory leaks. Do you think that the removeListeners are failing to be called for component unmounts?

I made it a "singleton" as I had assumed that having multiple instances of the resize detector may cause perf issues. Have you been able to test your modification against a large amount of tracked components?

[GlennGeenen]

The problem is that as long as a react-sizeme component exists in memory it won't release the resize detector (what means in most cases it stays in memory all the time). In theory it's no problem to have resizeDetector in memory since it should remove all listeners. We tried several things to fix the element-resize-detector uninstall without any success. So the way we solved it is by just throwing away the resizeDetector in SizeAwareComponent as seen in: https://github.com/GlennGeenen/react-sizeme/blob/master/src/sizeMe.js

I can't say what the performance difference is (no complains yet) but we use our fix in production since the memory leak was 1MB per page visit. So I guess the memory leak is in element-resize-detector (I'll make an issue) but we have no clue how to fix it.

[ctrlplusb]

We've received a reply from @wnr on this. We should prefer uninstall rather than removeAllListeners. Will apply this recommendation asap. 👍

[ctrlplusb]

Released in v2.4.2, thanks for your help in identifying this issue! ❤️

[pleunv]

Just a quick heads up, this approach seems to be losing an element reference somewhere along the way. After upgrading from 2.4.1 to 2.4.2 I end up with 2 exceptions being thrown in https://github.com/wnr/element-resize-detector/blob/master/src/detection-strategy/scroll.js:

Uncaught TypeError: Cannot read property 'onExpand' of undefined
    at HTMLDivElement.onExpandScroll (scroll.js:397)

Uncaught TypeError: Cannot read property 'onShrink' of undefined
    at HTMLDivElement.onShrinkScroll (scroll.js:401)

I currently don't really have time to investigate further and went back to 2.4.1, if I find some time I'll dig a bit and file a separate issue.