Memory leak

[binhpv]

By rendering 100000 ReactResizeDetector in a test, we discovered that the memory is not released and therefore test process is killed due to heap exhausted.

The problem can be reproduce by render the following code 100000 time using a for loop: describe.only("MyTest", () => { for (let i = 0; i < 100000; i++) { it(Test something: ${i}, () => { const wrapper = mount(myNotWorkingComponent()); }); } });

export function myNotWorkingComponent(): React.ReactElement { return <div> <ReactResizeDetector handleHeight handleWidth onResize={() => {}}> <input type={"text"}/> </ReactResizeDetector> </div>; }

unmount every for loop solved the issue. However there seems to be a reference somewhere that make the Garbage Collector to not collecting the myNotWorkingComponent after each run of the loop.

I haven't find time to investigate yet due to deadline in my project. Appreciate any help :)

[maslianok]

@binhpv thanks for the report.

I'm not sure that I understand the above code. Do you use some testing framework (i.e. Jest)? And you expect that it should be automatically unmount?

It seems that we remove all listeners in the componentWillUnmount https://github.com/maslianok/react-resize-detector/blob/master/src/components/ResizeDetector.js#L38

[lh0x00]

@binhpv can you provide a mini repo to reproduce?

[binhpv]

@binhpv thanks for the report.

I'm not sure that I understand the above code. Do you use some testing framework (i.e. Jest)? And you expect that it should be automatically unmount?

It seems that we remove all listeners in the componentWillUnmount https://github.com/maslianok/react-resize-detector/blob/master/src/components/ResizeDetector.js#L38

Hi @maslianok I think you are right, we need to unmount the component. In other places we have the same test, but the component was simple and no listeners was there and therefore it's GC-able.

Unmounting solved our issue. Thanks for the hint.