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...
For further actions, you may consider blocking this person and/or reporting abuse
I think you just complicated the things unnecessarily, always remember this rule of thumb
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.
codesandbox.io/s/reverent-bash-bxrnv
please let me know your thoughts on this.
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]);
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
Your solution is more intuitive than mine. Nice one!
Thank you!
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
Hey Sean! Interesting thoughts! I tried your approach, and it also works!
Thanks! That's awesome
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
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.
Thank you! Glad it helps!
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]);
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?
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.
I like the approach of the author, its simple and clean..
Hi!
If instead "setInterval" you use "setTimeout", your timer works perfectly in a simple code like your first try.
Thanks 😂!!! It's Helpful to me <3
realy like your post, it's really useful, thanks!!!!!!