react-use-count-down
react-use-count-down copied to clipboard
Countdown stops counting when the tab is not active
If the countdown starts on a tab and you switch to another in the browser, it stops counting.
This behaviour is seen on chrome.
I tried it also in edge, it also stops counting there but accelerates when the tab is active to reach the count where it should be.
I think it is due to use of window.requestAnimationFrame
under the hood. I could be wrong but I think it is due to better animations with window.requestAnimationFrame
, e.g. SO example.
Any thoughts on a solution/workaround on this one? I get maximum callstack size exceeded when the animation "resumes" when I calc duration/progress.
I'm setting duration & progress in a useEffect off the timeLeftMs...
useEffect(() => {
setDuration(timeLeftMs > 0 ? intervalToDuration({ start: 0, end: timeLeftMs }) : undefined);
// progress 100 to 0
setProgress(timeLeftMs <= threshold ? Math.round((timeLeftMs / threshold) * 100) : 0);
}, [timeLeftMs, threshold]);