title: Implementing a countdown timer in React with Hooks
body: <p>Im trying to render a count down timer on screen with react hooks, but I'm not sure the best way to render it.</p>
  
  <p>I know i'm supposed to use the useEffect to compare current state to previous state, but I don't think I'm doing it correctly.</p>
  
  <p>I would appreciate the help!</p>
  
  <p>I've tried a couple of different ways, none of them work, like setting state whenever whenever it updates, but it just ends up flickering like crazy.</p>
  
  <pre><code>
  
  const Timer = ({ seconds }) =&gt; {
      const [timeLeft, setTimeLeft] = useState('');
  
      const now = Date.now();
      const then = now + seconds * 1000;
  
      const countDown = setInterval(() =&gt; {
          const secondsLeft = Math.round((then - Date.now()) / 1000);
          if(secondsLeft &lt;= 0) {
              clearInterval(countDown);
              console.log('done!');
              return;
          }
          displayTimeLeft(secondsLeft);
      }, 1000);
  
      const displayTimeLeft = seconds =&gt; {
          let minutesLeft = Math.floor(seconds/60) ;
          let secondsLeft = seconds % 60;
          minutesLeft = minutesLeft.toString().length === 1 ? "0" + minutesLeft : minutesLeft;
          secondsLeft = secondsLeft.toString().length === 1 ? "0" + secondsLeft : secondsLeft;
          return `${minutesLeft}:${secondsLeft}`;
      }
  
      useEffect(() =&gt; {
          setInterval(() =&gt; {
              setTimeLeft(displayTimeLeft(seconds));
          }, 1000);
      }, [seconds])
  
  
      return (
          &lt;div&gt;&lt;h1&gt;{timeLeft}&lt;/h1&gt;&lt;/div&gt;
      )
  }
  
  export default Timer;```
  </code></pre>