title: How to start and stop timer display in ReactJS
body: <p>I am trying to create a Pomodoro timer in ReactJS. I am having trouble having the timer to stop it's countdown.</p>
  <p><strong>PomView.js</strong></p>
  <pre><code>const PomView = () =&gt; {
      const [timer, setTimer] = useState(1500)    // 25 minutes
      const [start, setStart] = useState(false)
      var firstStart = useRef(true)
      var tick;
  
      useEffect( () =&gt; {
          if (firstStart.current) {
              console.log(&quot;first render, don't run useEffect for timer&quot;)
              firstStart.current = !firstStart.current
              return
          }
  
          console.log(&quot;subsequent renders&quot;)
          console.log(start)
          if (start) {
              tick = setInterval(() =&gt; {
              setTimer(timer =&gt; {
                  timer = timer - 1
                  console.log(timer)
                  return timer       
                  }
              )
          }, 1000)
      } else {
          console.log(&quot;clear interval&quot;)
          clearInterval(tick);
      }
      }, [start])
  
      const toggleStart = () =&gt; {
          setStart(!start)
      }
  
  
      const dispSecondsAsMins = (seconds) =&gt; {
          // 25:00 
          console.log(&quot;seconds &quot; + seconds)
          const mins = Math.floor(seconds / 60)
          const seconds_ = seconds % 60
          return mins.toString() + &quot;:&quot; + ((seconds_ == 0) ? &quot;00&quot; : seconds_.toString())
      }
  
      return (
          &lt;div className=&quot;pomView&quot;&gt;
              &lt;ul&gt;
                  &lt;button className=&quot;pomBut&quot;&gt;Pomodoro&lt;/button&gt;
                  &lt;button className=&quot;pomBut&quot;&gt;Short Break&lt;/button&gt;
                  &lt;button className=&quot;pomBut&quot;&gt;Long Break&lt;/button&gt;
              &lt;/ul&gt;
              &lt;h1&gt;{dispSecondsAsMins(timer)}&lt;/h1&gt;
              &lt;div className=&quot;startDiv&quot;&gt;
                  {/* event handler onClick is function not function call */}
                  &lt;button className=&quot;startBut&quot; onClick={toggleStart}&gt;{!start ? &quot;START&quot; : &quot;STOP&quot;}&lt;/button&gt;
                  {start &amp;&amp; &lt;AiFillFastForward className=&quot;ff&quot; onClick=&quot;&quot; /&gt;}
              &lt;/div&gt;
          &lt;/div&gt;
      )
  }
  
  export default PomView
  </code></pre>
  <p>Although the <code>clearInterval</code> runs in the else portion of useEffect, the timer continues ticking. I am not sure if it is because of the asynchronous setTimer method in useEffect. I would like to know what the problem is with the code I have written.</p>