Memory leak in Resizable

[NightRare]

Hi,

I think the following code here (in Resizable component) did not remove the event listener attached to the window, which has caused the GC not being able to clean up the data of Resizable and its children even if the components' React lifecycles have ended.

    constructor(props) {
        super(props);
        this.state = { width: 0 };
    }

    componentDidMount() {
        window.addEventListener("resize", () => this.handleResize());
        this.handleResize();
    }

    componentWillUnmount() {
        window.removeEventListener("resize", () => this.handleResize());
    }

    handleResize() {
        if (this.container) {
            this.setState({
                width: this.container.offsetWidth
            });
        }
    }

Suggested change:

    constructor(props) {
        super(props);
        this.state = { width: 0 };
        this.handleResize = this.handleResize.bind(this);
    }

    componentDidMount() {
        window.addEventListener("resize", this.handleResize);
        this.handleResize();
    }

    componentWillUnmount() {
        window.removeEventListener("resize", this.handleResize);
    }

    handleResize() {
        if (this.container) {
            this.setState({
                width: this.container.offsetWidth
            });
        }
    }

The change has been tested on my project. Haven't done a thorough test though. Hopefully this is helpful.

Cheers.

[camflan]

Yep, that should be it. The previous implementation was using anonymous functions, so it wouldn't have been able to unregister the listener properly. I'll make a PR out of this! 👍

[sartaj10]

Thanks!