父组件每渲染生成新对象会触发 effect 循环

更新于 2026-07-07

**「Maximum update depth exceeded」这类 React 无限更新，常见根因是引用不稳定：子组件在 `useEffect` 里回填草稿，父组件每次渲染都 `setItems` 生成新对象 → `selectedItem` 变化 → callback 变化 → effect 再跑，形成循环。**

循环链

子组件 effect 回填本地草稿
  → 调父组件更新回调
  → 父组件 setItems([...]) 生成新对象/新数组
  → selectedItem 引用变化
  → 传给子组件的 callback 引用变化
  → 子组件 effect 依赖变化，再次执行
  → 回到第一步（无限）

判据与做法

  • 现象是 Maximum update depth exceeded，堆栈会指向某个在 effect 里反复触发的更新函数。
  • 关键是引用稳定性：父组件每渲染生成新对象/新数组，会让 memo 失效、让 effect 依赖「每次都变」。
  • 修法方向：内容没变就不要更新父 state（先比较再 set），或用稳定引用（useCallback/useMemo/规范化更新），并补一个锁住「内容没变不更新父 state」的测试。

相关