title: Remove an event listener on React component unmount
body: <p>I listen for window "scroll" events in one of my components.  However when the component is <strong>unmounted</strong>, the scroll event listener is not being removed.  </p>
  
  <p>The following error is produced when a scroll event occurs after the component has been unmounted:</p>
  
  <blockquote>
    <p>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.</p>
  </blockquote>
  
  <p>How can I properly remove this event listener?</p>
  
  <p><strong>Example code:</strong></p>
  
  <pre><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 { ... } 
  }
  </code></pre>