React Native中useEffect空依赖实现挂载逻辑时触发无限循环问题

首先明确：React Web 与 React Native 中 useEffect 的基础运行规则完全一致，空依赖数组仅在组件挂载完成后执行一次的逻辑没有差异，出现循环重挂载的问题并非RN改写了useEffect的执行逻辑，是RN生态下的组件渲染特性叠加现有代码写法共同触发的。
具体触发链路可以拆解为三个联动环节：

• React Native 生态下，全局状态更新更容易触发导航路由树的深度重渲染。不同于Web端SPA中全局Loading状态仅渲染在根节点固定位置、不会波及路由子树的特性，RN中常用的react-navigation如果把全局Loading状态绑定到导航容器的渲染参数、或者路由页面的包裹组件上，一旦Loading状态变化，就可能导致整个导航树的重新渲染，甚至触发当前页面对应组件的完全卸载、重新挂载。
• 同步Redux Action和Redux Thunk异步Action的执行时序差异放大了这个问题：同步Action会在当前JS执行栈内一次性完成dispatch，不会拆分出多次独立的状态更新时机；而代码中的Thunk Action会拆分出多个独立的dispatch节点——首先同步触发showLoader(true)的状态更新、进入接口请求等待阶段、接口返回后再触发认证状态更新、错误分支触发错误状态处理。每一个独立的dispatch都会触发一次全局store更新，刚好踩中导航树重渲染的触发节奏。
• 现有Home组件的写法存在依赖缺失的隐患：组件中通过useSelector读取了isAuthenticated值，但对应useEffect的依赖数组完全为空，没有在依赖项中纳入稳定引用的dispatch，在React 18 严格模式的RN开发环境下，JS Bridge的渲染时序差异可能导致effect执行错位，最终放大为无限循环。

• 第一步定位直接触发源：在Home组件中添加挂载/卸载的日志埋点，确认组件是否在每次全局Loading状态变化时被反复销毁重建：

useEffect(() => {
  console.log('Home组件完成挂载')
  return () => console.log('Home组件被卸载')
}, [])

如果观察到日志反复触发，直接调整全局Loading的渲染层级：把全局Loading组件放到NavigationContainer的外层同级位置，不要嵌套在导航路由的子渲染树内，这样Loading状态的变化就不会触发路由组件的重渲染，从根源上切断循环链路。

• 给token校验逻辑增加执行标记，避免组件意外重挂载时重复触发：
  对于明确只需要在页面首次进入时执行一次的逻辑，使用useRef记录执行状态，避免重挂载带来的重复调用：

const hasCheckedToken = useRef(false)
useEffect(() => {
  if (hasCheckedToken.current) return
  hasCheckedToken.current = true
  dispatch(Actions.checkIfTokenHasExpired())
}, [dispatch])

这里把dispatch加入依赖数组是安全的：useDispatch返回的dispatch引用是全局固定的，不会随组件重渲染变化，加入依赖不会触发effect重复执行，反而能通过React 依赖检查规则，避免依赖缺失导致的执行时序问题。

• 拆分Thunk Action的状态作用域：把原来放在全局store中的showLoader状态，改成仅在token校验流程内使用的局部状态，不要因为一次局部的接口请求状态更新触发全应用的全局组件重渲染，从状态设计层面降低循环触发的概率。

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