React中useEffect为何引发无限重渲染循环？

你的代码出现无限重渲染的核心原因是useEffect的依赖数组包含了被effect自身修改的状态data，形成了循环触发：

• 组件初始化时，data为null，满足依赖条件，执行effect并调用setData("hello")更新状态；
• data状态变化触发组件重渲染，重渲染后检测到依赖数组中的data值已改变，再次执行effect；
• effect里又调用setData，再次触发状态更新和重渲染，循环往复。

要实现「effect在状态更新后仅执行一次」的需求，只需将依赖数组改为空数组[]，这样React会认为该effect不需要依赖任何状态/ props，仅在组件首次挂载时执行一次：

const [data, setData] = useState(null);

useEffect(() => {
  setData("hello");
}, []); // 空依赖数组，仅组件挂载时执行一次

如果你的实际场景中需要依赖其他状态，但又要避免因修改data触发循环，需确保effect内部不会修改依赖数组中的值，或者通过useRef等方式缓存值，避免不必要的依赖触发。

内容的提问来源于stack exchange，提问作者張閔翔