title: How to reset the timer using UseEffect React Hooks
body: <p>I'm currently trying to make a pomodoro timer. One feature I noticed on some timers is that if you click reset time, it'll go to the default time (usually 15 minutes).</p>
  <p>I want it to be a little more advanced so that when you click reset, it will reset to whatever value you set the timer to.</p>
  <p>For example, when you open the screen the default time is 15 minutes. If you add 5 minutes, then press start, then press reset, it should reset to 20 minutes. Instead, my code is resetting it to 15.</p>
  <p>Can anyone think of a way to reset time?</p>
  <p>Apologies if it's a bad explanation. Thank you in advance.</p>
  <p>Here's my code so far using React Hooks:</p>
  <pre><code>import './App.css';
  
  function App() {
    const [session, setSession] = useState(5)
    const [timer, setTimer] = useState(2)
    const [isRunning, setIsRunning] = useState(false)
    const [resetTime, setResetTime] = useState(900)
  
    let time = new Date(timer * 1000).toISOString().substr(11, 8);
  
    function sessionIncrement() {
      setSession(prevSession =&gt; session + 1)
    }
    function sessionDecrement() {
      if (session &gt; 0) {
        setIsRunning(false)
        setSession(prevSession =&gt; prevSession &gt; 0 &amp;&amp; prevSession - 1)
      }
    }
  
    function resetTimer() {
      setIsRunning(false)
      setTimer(resetTime)
    }
  
    function increment() {
      setIsRunning(false);
      setTimer(prevTimer =&gt; prevTimer + 300);
    }
  
    function decrement() {
      setIsRunning(false);
      setTimer(prevTimer =&gt; prevTimer - 300);
    }
  
  
    useEffect(() =&gt; {
      if (isRunning) {
        const interval = setInterval(() =&gt; {
          setTimer(prevTimer =&gt; prevTimer &gt; 0 &amp;&amp; prevTimer - 1)
        }, 1000);
        if (timer === 0) {
          sessionDecrement()
          setIsRunning(false)
        }
        return () =&gt; clearInterval(interval)
      }
    }, [isRunning, session, timer])
  
    useEffect(() =&gt; {
      setResetTime(timer)
    }, [])
  
  
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;h1&gt;Session #{session}&lt;/h1&gt;
        &lt;button onClick={() =&gt; sessionDecrement()}&gt;-&lt;/button&gt;
        &lt;button onClick={() =&gt; sessionIncrement()}&gt;+&lt;/button&gt;
        &lt;h1&gt;{time}&lt;/h1&gt;
        &lt;button onClick={() =&gt; setIsRunning(false)} &gt;Pause&lt;/button&gt;
        &lt;button onClick={() =&gt; setIsRunning(true)}&gt;Start&lt;/button&gt;
        &lt;button onClick={() =&gt; resetTimer()}&gt;Reset&lt;/button&gt;
        &lt;button onClick={() =&gt; decrement()}&gt;-&lt;/button&gt;
        &lt;button onClick={() =&gt; increment()}&gt;+&lt;/button&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>