After opening the traffic lights challenge (or refreshing the page), the timer and lights update together, which is the expected behavior.
But after switching tabs the timer slows down and the lights and timer no longer update together.
Possible Reasons
The browser throttles the setInterval when the tab is inactive to reduce CPU consumption.
Hence both timers no longer update at expected intervals.
Expected behaviour
The timer and lights should update together. The lights should change after the timer ends irrespective of tab switching.
Suggested Solutions
Instead of using two separate useEffect for duration and lights, perform all updates in a single useEffect.
Framework/code-stack
React
Scope
Traffic lights
Description
After opening the traffic lights challenge (or refreshing the page), the timer and lights update together, which is the expected behavior.
But after switching tabs the timer slows down and the lights and timer no longer update together.
Possible Reasons The browser throttles the
setIntervalwhen the tab is inactive to reduce CPU consumption. Hence both timers no longer update at expected intervals.Expected behaviour
The timer and lights should update together. The lights should change after the timer ends irrespective of tab switching.
Suggested Solutions
Instead of using two separate
useEffectfor duration and lights, perform all updates in a singleuseEffect.Additional Context
No response