Pomodoro Clock: Reset button does not re-render time

1

https://codepen.io/hirodashi/pen/abvzEbp

When I click ‘reset’, it looks like the state updates but the timer in the DOM does not update.

Any ideas?

Thank you!

2

The status updates in React are Asynchronous, means when you call this.setState() it will not reset the state immediately, but whenever it has time to do it. So if you do something like below

this.setState({timer:timer+1});
console.log(this.state.timer);

then there is a high chance the older timer value will be printed to console and not the updated one. To fix it, use a second form of setState() that accepts a function rather than an object. That function will receive the previous state as the first argument.

this.setState((state, props) => ({
  timer: state.timer + props.increment
}));

First try replacing all the places you update your state like in the 1st method, with this 2nd method and see if it works. If not, there is another form of setState() which accepts a callback which will be called after the status have been updated. I have forked your code and altered below way inside your resetTimer() so that formatTimeLeft() will be called only after status is updated correctly.

this.setState((state)=>({timeLeft: state.sessionLength}),()=>{
      this.formatTimeLeft()
    });

PS - When I did this sometime back, I have used the 1st form of setState() and I got problems like this so I had to use the 2nd form. But I have never used callbacks. But in this case it did not worked until I have added the callback. So you can research more into this and figure out what is really happening here

3

Yes, now the reset button immediately causes the DOM to reset correctly. Thank you!