useInterval与useEffect异常：counter未按预期递增且定时器无法清除

问题根源 #

1. 重复创建定时器：原代码中setInterval直接写在组件顶层，组件每一次渲染（比如counter更新导致的重渲染）都会创建一个新的定时器，多个定时器同时运行就会让counter每秒多次递增。
2. 定时器引用丢失：counterInterval是组件每次渲染时重新声明的变量，作为useEffect的依赖会导致useEffect频繁执行，而且旧的定时器引用被丢弃，无法通过clearInterval正常清除。

修复后的代码 #

import { useState, useEffect } from 'react';

function YourComponent() {
  const [counter, setCounter] = useState(0);

  useEffect(() => {
    // 仅在组件挂载时创建一次定时器
    const intervalId = setInterval(() => {
      setCounter(prevCounter => {
        // 当计数即将到10时，清除定时器并直接返回10
        if (prevCounter >= 9) {
          clearInterval(intervalId);
          return 10;
        }
        return prevCounter + 1;
      });
    }, 1000);

    // 组件卸载时自动清理定时器，防止内存泄漏
    return () => clearInterval(intervalId);
  }, []); // 空依赖数组确保只执行一次

  return <div>{counter}</div>;
}

代码说明 #

• 将定时器创建逻辑放入useEffect，并使用空依赖数组，确保组件挂载时仅创建一次定时器，避免重复触发。
• 在更新counter的回调函数中判断计数状态，当计数到9时（加1后为10），直接清除定时器并设置最终值，保证刚好运行10秒。
• useEffect的返回函数作为清理逻辑，组件卸载时会自动清除定时器，避免内存泄漏，同时也能防止组件卸载后定时器继续运行的问题。

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