DEV Community

How to Create a Simple React Countdown Timer

Zhiyue Yi on January 07, 2020

Visit my Blog for the original post: How to Create a Simple React Countdown Timer A Few Words in Front Today I am going to share one in...

Read full post

Arpan Banerjee • Aug 9 '20

I think you just complicated the things unnecessarily, always remember this rule of thumb

whenever you want to update the state based on the previous state , pass a function to the setState() method, then react will make sure it will call the setState() with the latest value of the state variable.

import React from "react";
export default function App() {
  const [counter, setCounter] = React.useState(60);

  // Second Attempts
  React.useEffect(() => {
     counter>0 && setInterval(() => {
        setCounter((time)=>time-1);
      }, 1000);
  }, []);

  return (
    <div className="App">
      <div>Countdown: {counter}</div>
    </div>
  );
}

This solution works, but it has a problem, the countdown never stops.
To make it stop at 0, we will make use of useRef hook, it will store the reference to the setInterval, whihc we can clear when the timer is 0.The complete solution would look like this.

import React from "react";
export default function App() {
  const [timer, setTimer] = React.useState(10);
  const id =React.useRef(null);
  const clear=()=>{
  window.clearInterval(id.current)
}
  React.useEffect(()=>{
     id.current=window.setInterval(()=>{
      setTimer((time)=>time-1)
    },1000)
    return ()=>clear();
  },[])

  React.useEffect(()=>{
    if(timer===0){
      clear()
    }

  },[timer])


  return (
    <div className="App">

     <div>Time left : {timer} </div>

    </div>
  );
}

codesandbox.io/s/reverent-bash-bxrnv

please let me know your thoughts on this.

ankit kumar • Sep 1 '21 • Edited

Hi Arpan , i think if you pass Timer as dependency in useEffect, that will do the job simply.
you dont need to use useRef and 2nd useEffect.
let me know your thoughts.

React.useEffect(() => {
const TimerInt = timer >0 && setInterval(() => {
setCounter((time)=>time-1);
}, 1000);
return () => {
clearInterval(TimerInt)
}
}, [timer]);

mohammed hussam • Nov 17 '20

hey this is a very nice implementation , but consider i want the timer to completely stop at 0 , and then we want the countdown again , if we change the value of timer then it won't do anything.
Any idea how we can overcome this

Zhiyue Yi • Aug 12 '20

Your solution is more intuitive than mine. Nice one!

Arpan Banerjee • Aug 12 '20

Thank you!

Seanmclem • Jan 7 '20

I had good success creating a timer by storing the current datetime when starting the timer, and then on every interval getting the new current datetime again and doing the math to find the difference. If any computation takes longer than it should - it doesn't matter. The date time is always valid

Zhiyue Yi • Jan 8 '20

Hey Sean! Interesting thoughts! I tried your approach, and it also works!

Seanmclem • Jan 8 '20

Thanks! That's awesome

Ruben Solorio • Feb 17 '21 • Edited

Nice work! Learned good stuff and folks' comments! <3 Thanks!

Will point out that for more comprehensive timers a major problem with setIntervals or setTimeouts is that they're unreliable when switching between tabs/phone locks. Usually a 1000ms lag but can be arbitrary.
Solutions I've seen so far to the inaccuracy issue will be based on Date objects, Performance interface, requestAnimationFrame etc

FerhatAvdic • May 1 '20

You sir are amazing! You saved me so much time at work with this valuable post!! I needed to build a countdown from a certain date in days hours minutes and seconds.

Zhiyue Yi • May 11 '20

Thank you! Glad it helps!

ankit kumar • Sep 1 '21

hi @zhiyueyi , let me know your thoughts about this.

React.useEffect(() => {
const TimerInt = timer >0 && setInterval(() => {
setCounter((time)=>time-1);
}, 1000);
return () => {
clearInterval(TimerInt)
}
}, [timer]);

Luke Ramus • Mar 28 '20 • Edited

Cool, thank you! Only flaw is that if the user switches to a different tab, the timer pauses. Any thoughts on how to get around that, or is that just a limitation of how JavaScript runs in the browser?

Thành Trang • Apr 8 '20 • Edited

Whats limitation?

If your component will unmount, you should lift your count state up (or make it global) to store the current count. Then when remount, init your count state with the previous count. It'll start counting at the previous position.

If you component will not unmount, just clear your current timeout when the tab lost focus. It'll pause. When it get focused again, set your timeout back.