React Pomodoro Clock - timer logic help

JavaScript
1

I am having an issue with my timer logic. I click the play button and the countdown function is triggered, however the timer only counts down 1 second then gets stuck in a loop. I think this is an issue with my state implementation but I don’t know for sure.

Here is a link to my code: https://codesandbox.io/s/pomodoro-erncw

Any help would be appreciated!

2

in your countdown function you have newState.timeLeft = state.timeLeft - 1; insead of this newState.timeLeft = state.timeLeft -= 1;

3

Thanks biscuit! Does this violate React principles by directly modifying state?

4

i shouldn’t think so, but im not familiar with react myself so maybe a google search will help you, i use vue and iv never had problems modifying state on that.

5

Thanks, Biscuit. I did some searching and have some clarity but another React question that maybe others can answer. The React docs show that passing an update function in setState will ‘chain’ updates instead of conflicting (see Method 2).

    var newState = Object.assign({}, state);

    /* Method 1*/
    newState.timeLeft = state.timeLeft -= 1;
    setState(newState);

    /* Method 2*/
    setState((state) => {
      return {timeLeft: state.timeLeft - 1}
    })

    /* Original */
    newState.timeLeft = state.timeLeft - 1;
    setState(newState);

Method 1 is the implementation based on your suggestion, and state is directly manipulated (I think).

Method 2 is the implementation I found in the React docs. State is updated, not manipulated (I think).

Original is what I had when I posted.

  1. Is Method 1 directly manipulating state?
  2. Is Original running asynchronous, hence why it doesn’t work?