title: Why is setInterval not being cleared in REACT the same way as it is in vanilla JS
body: <p>I was creating a simple stopwatch component, when I found this weird behavior. I wanted a pause button to delete an interval, but it does nothing (the interval is still running after clicking on pause btn). It feels weird to me, because the same code was easily working in vanilla js and it would make the timer to stop counting.</p>
  <pre><code>  const [timer,setTimer] = useState(0)
    let interval;
  
    const tick = () =&gt;{
      setTimer(prev=&gt;prev+1)
    }
  
    const startInterval = () =&gt;{
      interval = setInterval(tick,1000)
    }
  
    const pauseInterval = () =&gt;{
      clearInterval(interval)
    }
    
    return (
      &lt;div&gt;
        &lt;h1&gt;Timer: {timer}&lt;/h1&gt;
        &lt;button onClick={startInterval}&gt;start&lt;/button&gt;
        &lt;button onClick={pauseInterval}&gt;pause&lt;/button&gt;
      &lt;/div&gt;
    )
  </code></pre>
  <p>The only way to go around this and make it work was to create another state, where I would keep my active interval.</p>
  <pre><code>const [timer,setTimer] = useState(0)
    const [activeInterval,setActiveInterval] = useState(null)
    let interval;
  
    const tick = () =&gt;{
      setTimer(prev=&gt;prev+1)
    }
  
    const startInterval = () =&gt;{
      interval = setInterval(tick,1000)
      setActiveInterval(interval)
    }
  
    const pauseInterval = () =&gt;{
      clearInterval(activeInterval)
      setActiveInterval(null)
    }
    
    return (
      &lt;div&gt;
        &lt;h1&gt;Timer: {timer}&lt;/h1&gt;
        &lt;button onClick={startInterval}&gt;start&lt;/button&gt;
        &lt;button onClick={pauseInterval}&gt;pause&lt;/button&gt;
      &lt;/div&gt;
    )
  </code></pre>
  <p>Why can't I remove the interval as I tried to do in the first code example?</p>