removeEventListener not working when called in componentWillUnmount

user_2067108 0
Viewed 7363

I'm trying to setState() such that it renders different number of items on different screen sizes set to component state as the window is resized. I've added an event listener when the component mounts and removed it when it unmounts.

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

updateValue()
{
    var windowWidth = window.screen.width;
    if(windowWidth <= 991 && windowWidth >= 768){
        this.setState({ items:6 })
    } else if(windowWidth <= 767 && windowWidth >= 479){
        this.setState({ items:4 })
    } else if( windowWidth < 480 && windowWidth >= 359){
        this.setState({ items:2 })
    } else if( windowWidth < 360){
        this.setState({ items: 2})
    } else {
        this.setState({items:12})
    }
}

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

Works fine when I'm in the route with the component mounted; until I move away from the component by opening another route and resize the window which is when I get the error:

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the FeaturedRestaurants component.

I get like a hundred errors in a second as I resize the screen.

Clearly, the removeEventListener isn't working. Where did I go wrong?

event-listener reactjs dom-events javascript
2 Answers

Try doing the following:

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

updateValue = () =>
{
    var windowWidth = window.screen.width;
    if(windowWidth <= 991 && windowWidth >= 768){
        this.setState({ items:6 })
    } else if(windowWidth <= 767 && windowWidth >= 479){
        this.setState({ items:4 })
    } else if( windowWidth < 480 && windowWidth >= 359){
        this.setState({ items:2 })
    } else if( windowWidth < 360){
        this.setState({ items: 2})
    } else {
        this.setState({items:12})
    }
}

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

You have to pass the same function as the second parameter to the addEventListener/removeEventListener. When you pass this.updateValue.bind(this), you are actually creating a new function and as such the two functions aren't the same. Instead, convert updateValue to arrow notation, keeping this as this of the class, and then you can send a reference to the same function twice.

user_54482340

I think you need to bind the function only once in the constructor. Because .bind() returns a new function object, removeEventListener will not remove initial event listener function you made.

user_89696160
Related