title: setInterval() and clearInterval() in React
body: <p>Hello mighty people from internet,</p>
  <p>I am trying to build a countdown timer app with pause and reset buttons using React hooks.</p>
  <p>The timer countdown should stop once pause or reset button gets clicked performed by function pauseCountDown() and reset(), respectively.</p>
  <p>However, the timer does not stop after pauseCountDown() or reset() executed.
  I don’t quite understand why setInterval() does not stop after clearInterval() gets executed.</p>
  <p>clearInterval() should be executed when <strong>isPaused === true</strong>.
  However, the value of “isPaused” instantly switches back to false along with the next iteration of nonstopped setInterval().</p>
  <p>Any ideas or thoughts what I missed or mistakes I have?</p>
  <p>Thank you.</p>
  <p>Here is the code of the child component performing timer countdown:</p>
  <pre><code>function TimerPanel(props) {
    var launch;
    var secLeft = parseInt(props.timerNow.min) * 60 + parseInt(props.timerNow.sec)
  
    const startCountDown = () =&gt; {
      props.setIsPaused(false)
      launch = setInterval(decrement, 1000)
    }
    function decrement() {
      if (secLeft &gt; 0 &amp;&amp; !props.isPaused) {
        secLeft--;
        var minCountDown = Math.floor(secLeft / 60)
        var secCountDown = Math.floor((secLeft % 60) * 100) / 100
        props.setTimerNow({...props.timerNow, min: minCountDown, sec: secCountDown})
      }
    }
    const pauseCountDown = () =&gt; {
      props.setIsPaused(true)
      clearInterval(launch)
    }
    const reset = () =&gt; {
      props.setIsPaused(false)
      clearInterval(launch)
      props.setSessionLength(props.initialTimer.min);
      props.setTimerNow({...props.timerNow, min: props.initialTimer.min, sec: props.initialTimer.sec})
    }
  </code></pre>