I listen for window "scroll" events in one of my components. However when the component is unmounted, the scroll event listener is not being removed.
The following error is produced when a scroll event occurs after the component has been unmounted:
warning.js:36 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 TopNavDesktop component.
How can I properly remove this event listener?
Example code:
class NavBar extends Component {
constructor() {
super();
this.state = {
distanceScrolled: null
}
}
componentDidMount() {
window.addEventListener('scroll', this.handleScroll.bind(this));
}
componentWillUnmount() {
window.removeEventListener('scroll', this.handleScroll.bind(this));
}
handleScroll(e){
const distanceScrolled = e.srcElement.body.scrollTop;
this.setState({ distanceScrolled: distanceScrolled });
}
render { ... }
}