Is there a better way to write my countDown function

Hello,
First and foremost here is the link to my project. https://codepen.io/zootechdrum/pen/maZKOQ?editors=0011

I have a a question about this part of my code.

startCountDown = () => {
  //checks if time is 0 and if break is false to change time === to breaklength
  if(this.state.time === 0 && this.state.breakStatus === false){
     this.setState(prevState => {
      return{breakStatus: !this.state.breakStatus,
       //added 1 to show the acutal number held in state
       //if you do not add 1 it will subtract 1 from state to quickly
          time:prevState.breakLength + 1
            }
    })
    //Below if statement checks if timer time should be set to time
    }else if(this.state.time === 0 && this.state.breakStatus === true){
       this.setState({
         breakStatus: !this.state.breakStatus,
       //added 1 to show the acutal number held in state
       //if you do not add 1 it will subtract 1 from state to quickly
         time:this.state.setTime + 1
       })
     }

Is there a way to write this function without adding the + 1. As of now if I don’t include it the timer starts at 6 instead of 7 . Basically it is subtracting immediately making the clock look like it starts at 6 instead of 7.

Assuming this is in React? If so, you really need to rethink how you’re setting state. You shouldn’t be altering values directly, rather use setState(). Doing so may help with the “too quickly” issue.

What exactly you didn’t like about his state setting?

The implication is that I don’t like it, and that isn’t accurate. I don’t have feelings about it one way or the other. But if this is a React component, then the only place where state is set directly is in the constructor – otherwise, React provides a setState method for this purpose.

Ok, I rephrase, where in that code snippet state is set directly?

Nope, you’re right – I saw the this.state.setTime and had a kneejerk.

Better way to do timings is to use Date function - when user clicks “start” you save current time using Date.now() and after each interval (or timeout) you check the time and update clock accordingly.

The real problem is where you just omitted the code which you pasted as a reference here.

See line #45, that’s the culprit. You are executing this line EVERY SINGLE TIME.
Even when the time timer reaches 0, you reset the current time, then the line #45 subtracts the time again. You need an else there.

Here’s the link for reference, you can see line #43 there.

you dont have to say else if. else is good enough it just leave it off and just use if statement by itself. Its more readable and uses less code

Things that still have a lot of room for improvement:

  • most of your comments are redundant => give the variables or functions better names:
timer? pressToStart? pressToStop? breakMinute?
  • your code is hard to read, because you don’t have a proper code formatting (click “Tidy JS” in Codepen)
  • redundant code, e.g. this.state.time === 0 && this.state.breakStatus === true => !this.state.time && this.state.breakStatus => or even better: abstract it into a function

But all in all good work!

I didn’t even think about that. Thanks.