setState does not update state immediately inside setInterval

Question

I am trying to build an analog clock with the second hand rotating every second, min hand rotating 6deg every minute and hour hand rotating 6deg every 12 minutes.

Here's the codesandbox: https://codesandbox.io/s/react-example-d7mes?file=/Clock.js

Whenever the min hand's angle is either of these [72, 144, 216, 288, 360] (12 minute degrees), I rotate the hour hand by 6 degrees once.

This is what I'm doing:

 let twelveMinDegrees = [72, 144, 216, 288, 360];

 setInterval(() => {
        this.setState(prev => ({
            sec: prev.sec == 360 ? 6 : prev.sec + 6,  //degrees
            min: prev.sec == 354 ? (prev.min == 360 ? 6 : prev.min + 6) : prev.min,  //degrees
            hrs: (function(){  //degrees

                const indx = twelveMinDegrees.findIndex(el => el == prev.min)
                if(!minChanged && indx >=0){ //only change once for every 12min
                    minChanged = true; 
                    let incHrs = prev.hrs + (6*indx);
                    console.log(incHrs);
                    return incHrs; 
                }else{
                    if(!twelveMinDegrees.includes(prev.min)){
                        minChanged = false;
                    }
                    return prev.hrs;
                }
            })()
         }))
    }, 1000)

But the hour hand does not change and is set back to the previous value in the else part the second time and the value returned incHrs is neglected because before the state is updated, the else is called the next second which returns prev.hrs which is still the old value(not the value returned in the if(!minChanged && indx >=0))

How do I fix this?

ggorlen · Accepted Answer

There's a fundamental design problem here which is that setInterval is the wrong tool for keeping time. setInterval only guarantees that the callback won't run for at least 1000 milliseconds, not that it will run exactly in 1000 milliseconds, so you're going to wind up with drift and skipped times.

I recommend using requestAnimationFrame and the Date library or performance.now to determine when ticks have occurred.

With this set up, you can scale the hour hand proportional to the number of minutes left in the hour with:

(hours + minutes / 60) * 30 + 180

If you want a rougher granularity to the hour hand adjustments, truncate the minutes into 6 distinct chunks:

(hours + floor(minutes / 10) * 10 / 60) * 30 + 180

Doing this mathematically is much less messy than looking up the increment points in a hardcoded array.

Here's a minimal example which you could use to keep accurate time (I'll leave styling to you):

.hand {
  width: 2px;
  height: 40%;
  background-color: black;
  transform-origin: top center;
  position: absolute;
  border-radius: 3px;
  top: 50%;
  left: 50%;
}

.analog-clock {
  position: relative;
  border-radius: 50%;
  border: 1px solid #aaa;
  height: 120px;
  width: 120px;
}

Here's a sped-up version with a mocked Date object to illustrate that it's working correctly:

.hand {
  width: 2px;
  height: 40%;
  background-color: black;
  transform-origin: top center;
  position: absolute;
  border-radius: 3px;
  top: 50%;
  left: 50%;
}

.analog-clock {
  position: relative;
  border-radius: 50%;
  border: 1px solid #aaa;
  height: 120px;
  width: 120px;
}

setState does not update state immediately inside setInterval

Answers (1)

Related Questions