为什么我的React setState永远循环？

I am trying to make a pomodoro app and the count down clock will keep toggle the breaking state when the time is up, the breaking state will indicate whether you're currently working (breaking === false) or you're taking a break (breaking === true).

However, the console shows that the setBreaking are keep looping, resulting in error. I've tried to pass in an anonymous function with prevState => !prevState, error still occur. Any advice?

以下是摘录：

  function Clock() {
    const [minute, setMinute] = useState(parseInt(remainingTime/60));
    const [second, setSecond] = useState(padZero(remainingTime%60));
    const [breaking, setBreaking] = useState(false);

    function padZero(num) {
      return num.toString().padStart(2,0);
    }

    function countDown() {
      useInterval(() => {
        setRemainingTime(remainingTime-1);
      }, 1000);
    }

    if (remainingTime === 0) {
      setBreaking(!breaking)
      setCountDown(false);
      setRemainingTime(breakMinute*60)
    }

    if (countingDown === true) {
      countDown();
    } else {
      console.log('Timer stopped!');
    }

    return <h1>{minute}:{second}</h1>
  };