title: setInterval in react does not update the setState
body: <p>I want to make a countdown timer (25 minutes). This is the code in App.js file</p>
  <pre><code>import './App.css';
  import React, { useState } from 'react';
  
  function App() {
    const [remainingTime, setRemainingTime] = useState(1500);
    const [seconds, setSeconds] = useState(0);
    const [minute, setMinute] = useState(remainingTime/60);
  
    function timer() {
      setRemainingTime(remainingTime-1);
      let newMinute = remainingTime/60;
      let minuteArray = [...newMinute.toString()];
      setMinute(parseInt(minuteArray.slice(0,2).join(&quot;&quot;)));
      setSeconds(remainingTime%60);
      console.log(minute);
      console.log(seconds);
    }
  
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;div className=&quot;pomodoro&quot;&gt;
          &lt;div className=&quot;timer&quot;&gt;{minute}:{seconds}&lt;/div&gt;
          &lt;div className=&quot;button-container&quot;&gt;
            &lt;button className=&quot;start&quot; onClick={() =&gt; setInterval(timer, 1000)}&gt;start&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>The interval does not update the state value. The minute value always 25 and the seconds value always 0. When I don't use setInterval and just use the timer function like this</p>
  <pre><code>&lt;button className=&quot;start&quot; onClick={timer}&gt;start&lt;/button&gt;
  </code></pre>
  <p>every time I click the start button, the value changes. Any idea? I know I should use clearInterval too but I don't know where to put it. Should I create a new function which contain setInterval and clearInterval?</p>