title: How to reset Timer in react-Hooks
body: <p>I was trying to force the effect to re-run in order to start the interval again in React-hooks</p>
  
  <p>here is complete code in sandbox <a href="https://codesandbox.io/s/dreamy-villani-8z938?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/dreamy-villani-8z938?file=/src/App.js</a></p>
  
  <p><code>const [timerReset, resetTimer] = React.useReducer(x =&gt; x + 1, 0);</code></p>
  
  <p>The reducer function x=>x+1 increments the timerReset value whenever dispatch  is called. And then I use timerReset to force the effect to re-run in order to start the interval again (if it stopped)</p>
  
  <p>my time code is </p>
  
  <pre><code>import React from "react";
  import "./styles.css";
  
  export default function Timer({
    estimatedTime,
    onTick,
    active,
    newTime,
    timerReset
  }) {
    const [counter, setCounter] = React.useState(estimatedTime);
    const [counterSecond, setCounterSecond] = React.useState(newTime);
  
    React.useEffect(() =&gt; {
      let timer;
      let timersecond;
      if (active) {
        timersecond = setTimeout(() =&gt; setCounterSecond(counterSecond + 1), 1000);
        timer = counter &gt; 0 &amp;&amp; setTimeout(() =&gt; setCounter(counter - 1), 1000);
      } else {
        onTick(counterSecond);
      }
      return () =&gt; {
        if (timer &amp;&amp; timersecond) {
          clearTimeout(timer);
          clearTimeout(timersecond);
        }
      };
    }, [counter, counterSecond, active, onTick, timerReset]);
  
    return (
      &lt;div&gt;
        &lt;div&gt;Time: {counterSecond} &lt;/div&gt;
        &lt;div&gt;Countdown: {counter}&lt;/div&gt;
      &lt;/div&gt;
    );
  }```
  
  
  
  </code></pre>