为何React中useEffect调用setItems会触发无限渲染循环？

问题根源 #

你遇到的无限循环和「values与items独立」的认知无关，本质是组件重渲染的连锁反应+回调函数引用频繁变化形成了闭环，具体链条如下：

1. 父组件App每次重渲染时，handleChange回调函数都会被重新创建，生成新的引用。
2. 子组件MyComponent的useEffect依赖了这个onChange回调，一旦引用变化就会触发onChange更新values。
3. 当你取消注释setItems([])后：
   • 子组件触发onChange→App的values更新→App重渲染。
   • App的useEffect（依赖values）执行→调用setItems([])→items更新→App再次重渲染。
   • 新的重渲染生成新的handleChange引用→子组件useEffect检测到变化→再次触发onChange更新values。
   • 上述流程反复执行，形成无限循环。

解决方案 #

方案1：用useCallback缓存回调函数（推荐）

在App.js中使用useCallback缓存handleChange，保证其引用在组件生命周期内稳定：

import { useState, useEffect, useCallback } from 'react';
import MyComponent from './MyComponent';

export default function App() {
  const [values, setValues] = useState({});
  const [items, setItems] = useState(['a', 'b', 'c']);

  useEffect(() => {
    setItems([]);
  }, [values]);

  // 用useCallback缓存函数，依赖为空（setValues由React保证引用稳定）
  const handleChange = useCallback((newValues) => {
    setValues(newValues);
  }, []);

  return <MyComponent values={values} onChange={handleChange} />;
}

这样子组件的useEffect不会因为onChange引用变化而重复触发，闭环被打破。

方案2：避免无意义的items更新

setItems([])每次都会生成新的空数组引用，即使items已经是空数组，也会触发App重渲染。可以加判断优化：

useEffect(() => {
  // 仅当items不为空时才更新
  if (items.length > 0) {
    setItems([]);
  }
}, [values, items]);

但这个方案只能减少重渲染次数，无法彻底解决回调引用变化的问题，还是优先用方案1。

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