子组件useEffect执行多次咨询：空依赖仍触发三次

问题描述 #

给子组件ChildWidget的useEffect设置了空依赖数组，但它却执行了三次；而父组件的空依赖useEffect始终只执行一次。疑惑是否是forwardRef与useEffect存在冲突，或是遗漏了某些配置。

代码示例 #

const ChildWidget = (props) =>{
  useEffect(()=>{ console.log('ChildWidget useEffect func')},[])
  return (<div>ChildWidget</div>)
}

const Parent = forwardRef((props, ref) =>{
  useImperativeHandler(ref,()=>({
    show(){/* some code */},
    hide(){/* some code */}
  }))

  useEffect(()=>{console.log('Parent UseEffect')},[]);

  return(
    <ChildWidget a={props.a} b={props.b}/>
  )
})

问题分析 #

forwardRef和useImperativeHandler本身不会与useEffect产生冲突，子组件useEffect多次执行的核心原因是子组件被重复挂载了三次——空依赖的useEffect只会在组件挂载时执行，单纯的组件重新渲染不会触发它的重复执行。以下是常见的排查方向：

• React严格模式（StrictMode）：开发环境下，React 18的StrictMode会对组件执行一次额外的「挂载-卸载-挂载」操作，导致useEffect执行两次。如果同时存在其他触发挂载的逻辑，可能叠加出现三次执行的情况，生产环境下StrictMode会自动禁用。
• 子组件的挂载/卸载触发逻辑：你提到父组件有省略的动态加载逻辑，需检查是否存在条件渲染（比如状态切换导致ChildWidget反复被挂载、卸载）、key属性不稳定（比如使用Math.random()或每次渲染生成新的key，会让React认为是全新组件，触发卸载再挂载）。
• 父组件的props传递：如果props.a或props.b是每次父组件渲染时生成的新对象/数组（比如直接传递{}或[]），会导致子组件频繁重新渲染，但不会触发空依赖useEffect重复执行——除非这种重新渲染伴随组件的卸载和重建。

解决方案 #

1. 临时关闭StrictMode验证：移除根组件外层的<StrictMode>标签，观察子组件useEffect的执行次数，如果恢复为一次，说明是StrictMode的开发环境校验导致。
2. 固定子组件的key值：给ChildWidget指定一个稳定的key（比如<ChildWidget key="child" a={props.a} b={props.b}/>），避免因key变化触发组件重建。
3. 排查动态加载逻辑：补全父组件的动态加载代码，检查是否存在多次触发子组件挂载的逻辑（比如异步加载状态反复切换、路由重复跳转等）。
4. 稳定props引用：如果props.a/props.b是复杂类型，在父组件中用useMemo缓存后再传递，避免不必要的子组件重新渲染：

   const stableA = useMemo(() => props.a, [props.a]);
   const stableB = useMemo(() => props.b, [props.b]);
   return <ChildWidget a={stableA} b={stableB}/>;
   

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