React useEffect 鈎子沒有清除間隔

Question

我正在嘗試使用反應掛鈎構建一個簡單的倒數計時器來倒計時 3 秒。 但是 3 秒后 UI 停止渲染但在 console.log 中我仍然可以每秒打印一次。 為什么 useEffect 中的第二個數組參數不能阻止這種情況的發生？

代碼沙箱

function CounterGame() {
  const [timeout, setTimeout] = React.useState(3);

  React.useEffect(() => {
    let id = window.setInterval(() => {
      if (timeout > 0) {
        setTimeout(x => x - 1 );
      }
      // this line keep executing even it timeout reach 0
      console.log("in setInterval", timeout);
    }, 1000)

    return () => {
      window.clearInterval(id);
    }
  }, [timeout])
  return (
    <div className="App">
      See instructions.
      <h1>{timeout} seconds</h1>
      {!timeout && <button>Click</button>}
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<CounterGame />, rootElement);

Answer 1

這可能對你有用：

通過在 useEffect 中添加條件，在 timeOut 為零時清除間隔

React.useEffect(() => {
      let id = window.setInterval(() => {
        if (timeout > 0) {
          setTimeout(x => x - 1 );
        }

    //clearIntervel here
        if(timeout == 0){
            window.clearInterval(id);
        }

        // this line keep executing even it timeout reach 0
        console.log("in setInterval", timeout);
      }, 1000)
  
      return () => {
        window.clearInterval(id);
      }
    }, [timeout])

Answer 2

根據React 文檔：

這就是為什么 React 還會在下次運行效果之前清理上一次渲染的效果。

基於此，我相信清理 function 直到useEffect的下一次迭代才會運行。 在您的示例中， timeout達到 0 后， useEffect將再運行 1 次，設置新的間隔，但由於timeout為 0，它不會更新 state，因此不會在下一次渲染時調用useEffect 。 這意味着最后一次迭代永遠不會調用清理 function。