removeEventListener not working when called in componentWillUnmount

Question

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?

Answer 1

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.