React定时器重复渲染且定时清理失效问题排查与解决

当秒数计数到2时，组件会渲染1、2；计数到3时，会渲染1、2、3。为何该组件会多次重渲染，且setTimeout无法正常工作？是否遗漏了关键逻辑？

问题代码：

const Timer = () => {
  const [seconds, setSeconds] = useState(0);
  var interval;
  useEffect(() => {
    interval = setInterval(() => {
      setSeconds(seconds + 1);
      console.log("seconds", seconds);
    }, 1000);
    setTimeout(() => clearInterval(interval), 5000);
  }, [seconds]);

  return (
    <>
      <div>{seconds}</div>
    </>
  );
};
export default Timer;

核心问题原因 #

• 重复创建定时器：useEffect的依赖数组包含seconds，每次seconds更新触发组件重渲染，都会重新执行useEffect并创建新的setInterval。旧定时器未被清理，多个定时器同时修改状态，导致多次渲染。
• 闭包陷阱：定时器回调中的seconds是创建时的闭包值，不会随组件更新同步。比如第一次创建的定时器，回调里的seconds永远是0，每次执行都把状态设为1；第二次创建的定时器（seconds=1时），回调里的seconds永远是1，每次执行设为2，多个定时器叠加就会出现连续渲染多个数值的情况。
• 清理逻辑失效：每次useEffect执行都会创建新的setTimeout，但旧定时器未被及时清理，依然在运行，导致setTimeout无法终止所有定时器。

修正后的代码 #

const Timer = () => {
  const [seconds, setSeconds] = useState(0);
  useEffect(() => {
    const interval = setInterval(() => {
      // 使用函数式更新获取最新状态值，避免闭包问题
      setSeconds(prevSeconds => prevSeconds + 1);
    }, 1000);
    
    // 5秒后停止定时器
    const timeoutId = setTimeout(() => {
      clearInterval(interval);
    }, 5000);

    // 组件卸载时清理定时器和延时器，防止内存泄漏
    return () => {
      clearInterval(interval);
      clearTimeout(timeoutId);
    };
  }, []); // 空依赖数组，仅组件挂载时执行一次

  return (
    <>
      <div>{seconds}</div>
    </>
  );
};
export default Timer;

关键逻辑说明 #

• 空依赖数组的useEffect仅在组件挂载时执行一次，确保只创建一个定时器，避免重复创建导致的状态混乱。
• 函数式更新setSeconds(prev => prev + 1)直接基于上一次的状态值更新，不受闭包影响，保证状态更新的准确性。
• useEffect返回的清理函数会在组件卸载时执行，同时清理定时器和延时器，彻底终止所有异步操作，防止内存泄漏。

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