React Hooks中setState更新dataReg触发useEffect无限循环问题

本质是形成了无出口的状态更新闭环，完整触发链路如下：

• 你给当前useEffect设置的依赖项为[dataReg]，只要dataReg的引用发生变化，就会重新执行该useEffect的回调逻辑
• 回调内调用的readReg是异步请求逻辑，请求完成后会执行setDataReg写入新的数组/对象数据
• 数组、对象这类引用类型的状态，只要是新生成的实例，哪怕内容和之前完全一致，也会被React判定为状态变更，触发组件重渲染
• 重渲染后dataReg生成新的引用，再次命中useEffect的依赖变更条件，重复执行readReg请求、setDataReg更新状态的流程，最终形成无中断的无限循环

你贴出的useEffect写法存在语法疏漏：箭头函数如果要执行多条语句（调用readReg、打印日志），必须用花括号包裹函数体，按你当前的代码结构直接运行会抛出语法错误，可正常执行的代码结构应该是：

useEffect(() => {
  readReg()
  console.log(dataReg)
}, [dataReg])

• 调整useEffect的依赖边界：把仅需在组件首次挂载时执行的读数据逻辑，依赖数组设置为空数组[]，保证readReg只在组件加载阶段执行一次，不会因为dataReg的更新被反复触发
• 拆分独立的副作用逻辑：如果需要在dataReg更新时打印日志，单独编写一个依赖[dataReg]的useEffect专门处理日志输出，不要把修改状态的读数据逻辑和日志逻辑放在同一个依赖dataReg的回调里
• 通用注意事项：避免在依赖自身状态的useEffect回调中，执行会修改该状态的操作，这是React Hooks开发中引发无限循环的最常见场景

内容的提问来源于stack exchange，提问作者Ranu Castaneda