why setInterval not working correctly in React app

Question

I want to create a reverse timer on button click.

I created a setInterval with a function that should take into account the data of seconds and minutes, and when you click on the start button, seconds = 59 and decrease by 1 every second, after that, when seconds = 0, minutes should decrease by 1, and seconds are 59. But after pressing the button, seconds = 59 and minutes -1, but no countdown occurs

  const [time, setTime] = useState(10);
  const [sec, setSec] = useState(0);
  const [min, setMin] = useState(10);

  let timerInt;

  const timer=()=> {
    timerInt = setInterval(timerF, 1000);
    function timerF() {
      if(sec===0){
        setSec(59);
        setMin(min - 1);
      }
      if (sec <= 0 && min <= 0) {
        clearInterval(timerInt);
        setSec(0);
        setMin(0);
        console.log('finish')
      }
      setSec(prev=>prev-1)
    }
  }
  const handleStart = (time) => {
    setMin(time)
    setTime(time)
    timer();
    setDisabledBtn(true);
  };
      <div className="time">
        <div className="time-min">{min}</div>
        <span>:</span>
        <div className="time-sec">{sec}</div>
      </div>
      <button
        className="start-btn active-btn"
        type="button"
        disabled={disabledBtn && 'disabled'}
        onClick={() => handleStart(10)}
      >
        START
      </button>

If `min` is `1` and you call `setMin(min - 1)` `min` will still be `1`. It will be zero in the next render cycle — Konrad, May 09 '23 at 15:45
Does this answer your question? [The useState set method is not reflecting a change immediately](https://stackoverflow.com/questions/54069253/the-usestate-set-method-is-not-reflecting-a-change-immediately) — Konrad, May 09 '23 at 15:45

Incoglee · Accepted Answer · 2023-05-09T15:53:09.047

In your case the setInterval does not have the updated react state value. So i have created similar functionality using the useEffect and calling the timer() function with the updated react state. I have used setTimeout because we are binding and clearing the setTimeout on every state update. So there is no point using setInterval in my use-case.

Updated and working code below:

import React, {useState, useEffect} from 'react';

export function App(props) {
   const [time, setTime] = useState(2);
  const [sec, setSec] = useState(0);
  const [min, setMin] = useState(2);
  const [startTimer, setStartTimer] = useState(false);

  let timerInt;

  useEffect(() => {
    if(startTimer) {
      timer();
    }
    return () => {
      clearTimeout(timerInt);
    }
  }, [min, sec, startTimer]);

  const timer = () => {

    const timerF = () => {
      console.log("timer1", sec, min);
      if(!sec){
        setSec(59);
        setMin(min - 1);
      }
      if (sec <= 0 && min <= 0) {
        clearTimeout(timerInt);
        setSec(0);
        setMin(0);
        setStartTimer(false);
        console.log('finish')
      }
      setSec(prev=>prev-1)
    }
    timerInt = setTimeout(timerF, 1000);
  }

  const handleStart = (time) => {
    setStartTimer(true);
    setMin(time)
    setTime(time);
  };
   return (
    <div>
    <div className="time">
        <div className="time-min">{min}</div>
        <span>:</span>
        <div className="time-sec">{sec}</div>
    </div>
      <button
        className="start-btn active-btn"
        type="button"
        onClick={() => handleStart(2)}
      >
        START
      </button>
      </div>
   )

}

Try it out and let me know if you still have questions/concerns.

I modified it a little, because at the end when the countdown ended in the seconds field on the screen it was -1. I fixed it and everything works as it should! Thank you! — wch, May 09 '23 at 16:10

why setInterval not working correctly in React app

1 Answers1