autoStart false, countdown shortly shows seconds passed before rerendering and starting properly

This issue is probably related to hooks but here goes: My countdown is set to autostart false and to run for 60 seconds, when I start the timer, I first reset the date and key prop, otherwise the countdown would start running with the already passed seconds (e.g. if I wait 3 seconds before starting the countdown, the countdown would start at 0:57 instead of 1:00).

The parent component sets the “startTimer” prop to true, which in return sets autoStart to true as well:

useEffect(() => {
  let newCountdown = Date.now() + durationInSeconds * 1000;
  setCountdownKey(newCountdown);
  setCountdownDate(newCountdown);
}, [startTimer]);

.
.
.

<Countdown
  key={countdownKey}
  date={countdownDate}
  autoStart={startTimer}
  renderer={({ minutes, seconds }) => (
    <span>
      {minutes}:{zeroPad(seconds)}
    </span>
  )}
/>

The only issue I have right now is, once I start the countdown, it first jumps to the time passed (the same as described above with e.g. waiting 3 seconds, jumping to 0:57) and then resets correctly to 1:00 and goes down from there.

Is there a reason for the time jump with autostart false or am I not properly resetting the date and key before starting?

[christianstrang]

Thank you for your help! I don’t know what happened but I removed the fakeRenderer approach and it just works (the same code didn’t work before without a timejump). Not sure if there was some kind of caching involved or I didn’t handle sideeffects properly, but my current code now works as intended 😃

[ndresx]

It’s a bit hard to reproduce this now, but if you got anything to share in that direction to look into a bit more it would be great. I’m not quite sure how the date could get stale within the countdown and then update with this jump. Thank you already though for the feedback!