title: Stopping a timer in componentWillUnmount
body: <p>I'm making a little countdown timer as a React exercise (for myself, not a class or anything) and everything works fine (although notes are always welcome) except that I noticed that it keeps counting down even after the component is unmounted.  </p>
  
  <p>So now I want to make it stop on unmount, but can't seem to get it right.  What is the protocol for stopping <code>setInterval</code> on unmount?  Here's what I have:</p>
  
  <pre><code>class TimerVal extends Component {
    constructor(props) {
      super(props)
      this.state = {
        timeToGo: 30
      }
    }
    secondsToMMSS(seconds) {
      //returns "mm:ss"
    }
    componentDidMount() {
      setInterval(
        () =&gt; this.setState({
          timeToGo: this.state.timeToGo - 1
        }),
        1000
      )
    }
    componentWillUnmount() {
      () =&gt; this.setState({
        timeToGo: undefined
      })
    }
    render() {
      // styles
      console.log(this.state)
      const count = ( this.state.timeToGo &gt; 0 ) ? this.secondsToMMSS(this.state.timeToGo) : "00:00"
      console.log(count)
      return(
        &lt;div style={timerStyle}&gt;
          &lt;span style={timerSpanStyle}&gt;
            {count}
          &lt;/span&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>