Remove an event listener on React component unmount
<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>