首次渲染调用状态更新函数引发Maximum update depth exceeded错误

我通过setInterval每3秒向数组添加一个随机数，原本代码运行正常，但尝试在首次渲染时调用extendTheList函数（即取消注释代码中的extendTheList();），就会触发Maximum update depth exceeded错误。

相关代码如下：

const [listItems, setListItems] = useState([]);

useEffect(() => {
    function extendTheList() {
      const randNr = Math.floor(Math.random() * 10);
      setListItems([...listItems, randNr]);
    }

    // extendTheList();

    const int = setInterval(() => {
      extendTheList();
    }, 3000);
    return () => clearInterval(int);
  }, [listItems]);

错误原因 #

useEffect的依赖数组包含listItems，当调用extendTheList时，setListItems会更新listItems状态，这会触发useEffect重新执行。而每次useEffect执行时又会调用extendTheList，再次更新listItems，形成无限循环，最终导致React触发更新深度超限的错误。

解决方案 #

方案一：使用函数式更新+空依赖数组（推荐）

通过函数式更新setState，不需要依赖listItems本身，同时将useEffect的依赖数组设为空，确保只在组件首次渲染时执行一次，避免循环：

const [listItems, setListItems] = useState([]);

useEffect(() => {
    function extendTheList() {
      const randNr = Math.floor(Math.random() * 10);
      // 函数式更新，直接基于前一次状态生成新数组
      setListItems(prevItems => [...prevItems, randNr]);
    }

    // 首次渲染添加第一个随机数
    extendTheList();

    const int = setInterval(() => {
      extendTheList();
    }, 3000);
    return () => clearInterval(int);
  }, []); // 空依赖数组，仅组件挂载时执行

方案二：用useRef标记首次渲染

如果需要保留listItems作为依赖（非必要场景），可以通过useRef记录是否为首次渲染，避免每次状态更新都调用extendTheList：

const [listItems, setListItems] = useState([]);
const isFirstRender = useRef(true);

useEffect(() => {
    function extendTheList() {
      const randNr = Math.floor(Math.random() * 10);
      setListItems([...listItems, randNr]);
    }

    // 仅首次渲染时调用
    if (isFirstRender.current) {
      extendTheList();
      isFirstRender.current = false;
    }

    const int = setInterval(() => {
      extendTheList();
    }, 3000);
    return () => clearInterval(int);
  }, [listItems]);

内容的提问来源于stack exchange，提问作者studio-pj