添加额外条件后useEffect为何触发两次？React倒计时问题

问题根源分析 #

带&& timer != null条件的代码为什么会每秒触发两次useEffect？

当倒计时走到timer=0时，会触发连锁的状态更新和useEffect调用：

1. timer=0触发依赖timer的useEffect，条件0 <1 && 0 != null成立，执行setTimer(null)和clearInterval。
2. setTimer(null)把状态从0改成null，再次触发useEffect，但此时timer=null不满足条件，无后续操作。
3. 核心问题：如果clearInterval执行不及时（比如事件循环调度延迟），interval的下一次回调已经触发——此时timer是null，执行setTimer(t => t-1)会得到null-1=-1，状态被改为-1。
4. timer=-1再次触发useEffect，条件-1 <1 && -1 != null成立，又执行setTimer(null)和clearInterval，状态变回null后再次触发useEffect。
5. 最终形成循环：-1 → null → -1 → null...，每秒触发两次useEffect（一次对应-1，一次对应null）。

移除&& timer != null条件后为什么恢复正常？

当倒计时走到timer=0时：

1. timer=0触发useEffect，条件0 <1成立，执行setTimer(null)和clearInterval。
2. setTimer(null)把状态改成null，触发useEffect，此时null <1会被隐式转换为0 <1（结果为true），再次执行setTimer(null)。
3. 但React会跳过无变化的状态更新（当前状态已经是null），因此不会再次触发useEffect。
4. 同时clearInterval已经执行，interval彻底停止，不会再产生后续状态更新，所以正常倒计时阶段每秒只会触发一次useEffect。

额外优化建议 #

• 明确状态判断逻辑：把条件改成if (timer !== null && timer <= 0)，避免依赖隐式类型转换，可读性更强。
• 增加卸载清理：在组件卸载时清理定时器，防止内存泄漏：

  useEffect(() => {
    return () => clearInterval(intervalId.current);
  }, []);
  

• 防止重复启动：start函数里先清理已有定时器，避免多次点击启动多个倒计时：

  const start = () => {
    clearInterval(intervalId.current);
    setTimer(900);
    intervalId.current = setInterval(() => {
      setTimer(t => t - 1);
    }, 1000);
  };
  

内容的提问来源于stack exchange，提问作者GnomeMage