React自定义useApi Hook在Main.tsx中触发无限循环调用问题排查

触发逻辑匹配 #

结合你观测到的现象：注释掉setAccessKeyIsValid(true)即可终止循环、useApi被反复重新初始化、go()方法持续执行、无外部代码订阅accessKeyIsValid状态，循环闭环必然来自React状态更新与重渲染的链路，不存在无触发源的状态变更。

常见根因与对应修复 #

• 无前置判断的重复状态更新
  这是该场景下占比最高的触发原因。直接执行setAccessKeyIsValid(true)时，哪怕目标值与当前状态完全一致，如果没有做前置相等性校验，在自定义Hook的隔离状态上下文中依然会触发组件重渲染。重渲染过程中useApi被重新执行，如果go()的执行逻辑没有做副作用隔离（比如直接写在Hook函数体顶层、或者绑定在无依赖数组的useEffect中），就会在每次重渲染时重复执行go()，go()内部再次触发setAccessKeyIsValid，形成循环闭环。
  修复方式：在状态更新逻辑中增加前置值校验，过滤无意义的渲染触发：

  // 替换原setAccessKeyIsValid(true)的实现
  setAccessKeyIsValid(prev => prev === true ? prev : true)
  

• 副作用依赖绑定不稳定引用
  检查useApi内部所有触发go()执行的useEffect配置：如果依赖数组中混入了每次渲染都会重新生成的临时变量（比如未用useCallback包裹的go函数、未用useMemo包裹的内部配置对象），哪怕只是setAccessKeyIsValid触发的一次普通重渲染，这些动态引用都会被React识别为依赖变化，重新执行副作用内的go()逻辑，go()再次触发状态更新就会形成持续循环。
  修复方式：给所有作为useEffect依赖的函数、对象增加稳定引用处理，用useCallback包裹go方法，用useMemo包裹内部生成的配置对象。
• 调用侧传入动态引用参数
  检查Main.tsx中调用useApi时传入的所有参数：如果直接在调用位置书写匿名函数、内联对象，这些参数会在Main每次重渲染时生成全新引用，一旦useApi内部对这些参数做了依赖绑定，哪怕是一次无意义的状态更新触发的重渲染，都会触发go()重新执行形成循环。
  修复方式：把传入useApi的引用类型参数用useMemo/useCallback做稳定化处理，避免每次渲染生成新引用。

快速验证方法 #

在set调用前增加模块级标记做一次性执行控制，即可快速验证根因：

// 写在useApi.tsx模块顶层，不属于Hook内部状态
let validFlagSet = false;

// Hook内部替换原set逻辑
if (!validFlagSet) {
  validFlagSet = true;
  setAccessKeyIsValid(true);
}

如果增加这段逻辑后循环终止，即可确认是重复的无意义状态更新触发了渲染闭环。

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