React useEffect监听更新状态时出现循环问题的解决方案咨询

这是个很常见的React Hooks陷阱，我来帮你拆解问题和解决方案~

问题根源分析 #

你的useEffect依赖了整个state对象，每次调用setState更新shape时，state会生成新的引用，触发useEffect再次执行，进而又调用setState，形成无限循环。而ESLint提示添加state依赖，是因为你在useEffect里读取了state的值，但直接添加又会加剧循环问题。

解决方案 #

这里有三种可行的处理方式，按推荐程度排序：

方案1：用useMemo直接推导衍生状态（最推荐）

其实shape是完全由size推导出来的衍生值，根本不需要存在状态里。用useMemo实时计算，既能避免副作用，又能保证数据一致性：

export function useShape (){ 
  const [size, setSize] = useState({ width: 100, height: 100 })
  
  // 直接由size推导shape，无需额外状态
  const shape = useMemo(() => {
    return size.width === size.height ? 'square' : 'rect'
  }, [size.width, size.height])

  return { shape, size, setSize }
}

方案2：精准依赖+函数式更新

如果一定要把shape存在状态里，就把依赖项缩小到真正关心的width和height，同时用函数式更新获取最新状态，避免依赖整个state：

export function useShape (){ 
  const [state, setState] = useState({ shape: 'square', size: { width: 100, height: 100 } }) 

  useEffect(()=>{ 
    // 函数式更新可以拿到最新的prevState，不需要依赖当前state
    setState(prevState => ({
      ...prevState,
      shape: prevState.size.width === prevState.size.height ? 'square' : 'rect'
    }))
  }, [state.size.width, state.size.height]) // 只监听宽高变化
}

方案3：拆分独立状态

把shape和size拆成两个独立的useState，让状态职责更清晰，依赖关系也更明确：

export function useShape (){ 
  const [size, setSize] = useState({ width: 100, height: 100 })
  const [shape, setShape] = useState('square')

  useEffect(()=>{ 
    setShape(size.width === size.height ? 'square' : 'rect')
  }, [size.width, size.height]) 

  // 如需统一对外暴露，返回合并后的对象即可
  return { shape, size, setSize }
}

这些方案都能解决循环问题，同时满足ESLint的依赖提示要求，推荐优先用第一种，因为它更符合React中"衍生状态尽量实时计算"的设计理念。

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