useEffect中setInterval未正常工作：问题排查与原理解析

这是一项用于技术探究的实验，期望两个setInterval在启动时就能正常工作，但实际情况并非如此。需要了解useEffect和setInterval的工作机制，以及导致第二个setInterval无法稳定更新状态值的原因（观察到两者偶尔会出现随机更新的情况）。

问题代码 #

import { useState, useEffect } from "react";

export default function App() {
  const [student, setStudent] = useState(0);
  const [teacher, setTeacher] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setStudent((student) => student + 1);
    }, 1000);

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

  useEffect(() => {
    const intervalId2 = setInterval(() => {
      setTeacher((Teacher) => Teacher + 1 / 2);
    }, 2000);

    return () => clearInterval(intervalId2);
  });

  return (
    <div className="App">
      <p key="0">Student - {student}</p>
      <p key="1">Counter - {teacher}</p>
      {student === teacher ? "bother are ok" : "need more..."}
    </div>
  );
}

问题根源 #

1. useEffect无依赖数组导致重复执行：两个useEffect都没设置依赖数组，意味着组件每次状态更新（比如student变化）都会触发useEffect重新执行。
2. 定时器被频繁销毁重建：每次useEffect执行时，先调用清理函数清除旧定时器，再创建新的。第二个定时器本应每2秒更新一次，但因为组件每秒都会因student更新而重新渲染，导致它刚创建不久就被清除，根本无法稳定按预期间隔执行。
3. 随机更新的假象：偶尔的随机更新是因为在定时器被清除前，刚好触发了一次状态更新，这种情况完全是随机的。

修复方案 #

给每个useEffect添加空依赖数组[]，让它们只在组件挂载时执行一次，定时器也就只会创建一次，不会被频繁中断：

import { useState, useEffect } from "react";

export default function App() {
  const [student, setStudent] = useState(0);
  const [teacher, setTeacher] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setStudent((prev) => prev + 1);
    }, 1000);

    return () => clearInterval(intervalId);
  }, []); // 空依赖数组：仅挂载时执行

  useEffect(() => {
    const intervalId2 = setInterval(() => {
      setTeacher((prev) => prev + 0.5);
    }, 2000);

    return () => clearInterval(intervalId2);
  }, []); // 空依赖数组：仅挂载时执行

  return (
    <div className="App">
      <p>Student - {student}</p>
      <p>Counter - {teacher}</p>
      {student === teacher ? "both are ok" : "need more..."}
    </div>
  );
}

额外说明 #

• 函数式更新setX(prev => prev + value)是正确的选择，它能确保每次更新都基于最新的状态值，避免闭包捕获旧状态的问题。
• 空依赖数组的useEffect只会在组件首次挂载时运行，清理函数在组件卸载时执行，这样定时器就能稳定按照设定的间隔工作。

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