React页面加载自增计时器加速异常问题求助

问题根源 #

你写的代码里，useEffect的依赖数组是[sec]，这意味着每次sec更新时，这个useEffect都会重新执行，每次执行又会创建一个新的setInterval定时器。而之前创建的旧定时器并没有被清除，导致页面上同时运行着多个定时器，每个定时器都在每秒递增sec，所以计时器会越跑越快。

举个例子：第一次组件挂载时创建定时器A，每秒让sec+1；当sec变成1时，useEffect再次执行，创建定时器B，此时A和B同时工作，sec每秒跳2；之后sec每更新一次，就新增一个定时器，速度自然越来越快。

修复方案 #

方案1：清除旧定时器+空依赖数组

利用useEffect的返回函数清除定时器，同时把依赖数组改成空数组（只在组件挂载时执行一次useEffect），结合函数式更新setSec(prev => prev+1)（不需要依赖sec就能拿到最新状态值）：

function App() {
  const [sec, setSec] = useState(0);

  useEffect(() => {
    const timerId = setInterval(() => {
      setSec(prev => prev + 1);
    }, 1000);
    // 组件卸载或useEffect重新执行前清除旧定时器
    return () => clearInterval(timerId);
  }, []); // 空数组：仅在组件挂载时执行一次

  return <span>{sec}</span>;
}

方案2：用useRef保存定时器ID（适合需要手动控制启停的场景）

如果之后需要手动暂停、重启计时器，用useRef存储定时器ID会更方便——useRef的.current属性是可变容器，不会随组件重新渲染重置，能一直保留定时器的引用：

function App() {
  const [sec, setSec] = useState(0);
  const timerRef = useRef(null);

  useEffect(() => {
    timerRef.current = setInterval(() => {
      setSec(prev => prev + 1);
    }, 1000);
    return () => clearInterval(timerRef.current);
  }, []);

  // 可添加控制按钮，比如：<button onClick={() => clearInterval(timerRef.current)}>暂停</button>

  return <span>{sec}</span>;
}

关于你看到的示例代码逻辑 #

你看到的用useRef的示例，核心是利用useRef的持久化特性保存定时器ID，避免组件重渲染时丢失引用。而有些示例用setSec(sec+1)的写法其实不够严谨，如果依赖数组配置错误，会因为闭包问题拿到旧的sec值，所以更推荐用函数式更新setSec(prev => prev+1)，确保每次都能获取最新的状态值。

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