setInterval是否在声明时立即执行？React定时器自动启动咨询

我在学习React时看到如下简单定时器示例代码：

export default function Timer() {
  const [time, setTime] = useState(0);
  
  const intervalId = setInterval(() => {
    setTime((prev) => prev + 1);
  }, 1000);

  useEffect(()=>{
    return () => {
      clearInterval(intervalId);
    };
  });

  return (
    <>
      <h1>Time: {time}</h1>
    </>
  );
}

运行该代码后定时器自动启动，我未调用声明后的intervalId但定时器仍运行，特此咨询：setInterval是否在声明时立即执行？

回答 #

是的，setInterval在调用时就会立即启动定时器——它不需要你额外调用返回的intervalId来触发执行。

具体说明：

• setInterval是浏览器原生API，当你执行这个函数时，它会立刻安排第一个回调在指定延迟后执行（示例中是1000ms后），之后每隔指定时间重复执行回调逻辑。
• 你拿到的intervalId只是用来取消定时器的唯一标识，比如示例里的clearInterval(intervalId)，它本身和定时器的启动没有关联。

另外要注意，你这段React代码存在一个隐患：每次组件重新渲染（比如time更新后），都会重新调用setInterval创建新的定时器，最终导致多个定时器同时运行。正确的写法应该给useEffect加上空依赖数组，确保只在组件挂载时创建一次定时器：

export default function Timer() {
  const [time, setTime] = useState(0);
  
  useEffect(()=>{
    const intervalId = setInterval(() => {
      setTime((prev) => prev + 1);
    }, 1000);

    return () => {
      clearInterval(intervalId);
    };
  }, []); // 空依赖数组，仅在组件挂载时执行一次

  return (
    <>
      <h1>Time: {time}</h1>
    </>
  );
}

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