setInterval only executes once-CodePudding

I'm working on a React component where on form submit, a timer takes in the value input from a slider component and starts to count down to zero. However, it is only the timer stops after 1 of the setInterval function in triggerClock(). I'm not sure what to do.

My React component:

const Home = (props) => {
  let timeInMinutes;
  let timeInSeconds;

  const [time, setTime] = useState(0);
  const [minutes, setMinutes] = useState(0);
  const [seconds, setSeconds] = useState(0);

  const handleTimeChange = (event) => {
    setTime(event.target.value);
  };

  const triggerClock = () => {
    const interval = setInterval(() => {
      if (minutes === 0 && seconds === 0) {
        clearInterval(interval);
      }

      if (seconds === 0) {
        setSeconds((sec) => sec   59);
        setMinutes((min) => min - 1);
      } else {
        setSeconds((sec) => sec - 1);
      }
    }, 1000);

    return () => {
      clearInterval(interval);
    };
  };

  const handleFormSubmit = (event) => {
    event.preventDefault();
    timeInMinutes = time;
    timeInSeconds = timeInMinutes * 60;
    setMinutes(timeInSeconds / 60);
    setSeconds(timeInSeconds % 60);
    triggerClock();
  };

  return (
    <React.Fragment>
      <Header />
      <Container maxWidth="xs" sx={{ textAlign: "center" }}>
        <Typography variant="h5">Set Time (Minutes)</Typography>
        <Box component="form" onSubmit={handleFormSubmit}>
          <Slider
            aria-label="Timer"
            valueLabelDisplay="auto"
            step={10}
            marks
            min={0}
            max={60}
            value={time}
            onChange={handleTimeChange}
          />
          <Button type="submit">Submit</Button>
        </Box>
        <div>
          {minutes}:{seconds}
        </div>
      </Container>
    </React.Fragment>
  );
};

CodePudding user response：

There are a few issues here; first I'd suggest you have a read of Dan Abramov's excellent Making setInterval declarative blog post which is a great way to get your head around the tricky intersection of setInterval and React Hooks.

Firstly, you're putting too much stuff into React state. Your minutes and seconds can be directly, and trivially, derived from time. We don't need React to look after them for us, they are relevant only during "this render". so:

  const [time, setTime] = useState(0);

  const minutes = Math.floor(time / 60);
  const seconds = time % 60;

Secondly, in the spirit of Dan's quote:

"we can describe the process at all points in time simultaneously"

we need to know, and control, whether the timer is counting down or not:

const [timerRunning, setTimerRunning] = useState(false);

...

const triggerClock = () => {
  setTimerRunning(true);
};

Note that an additional benefit of this is we can now make our GUI reflect the state:

<Button disabled={timerRunning} type="submit">Submit</Button>

And finally, we have all the necessary parts to write a useEffect that will encompass the setInterval with the desired countdown, stop at the right time and clean up the interval:

  useEffect(() => {
    if (timerRunning) {
      const interval = setInterval(() => {
        setTime((oldTime) => {
          const newTime = oldTime - 1;
          if (newTime === 0) {
            setTimerRunning(false);
          }
          return newTime;
        });
      }, 1000);
      return () => {
        clearInterval(interval);
      };
    }
  }, [timerRunning]);