React中useEffect添加size依赖引发无限循环的解决方案咨询

React要求useEffect钩子声明所有依赖是为了保证副作用逻辑的一致性，但在你这个场景里，直接把size加入依赖数组会触发无限循环——因为更新size后effect会再次执行，进而再次更新size。

正确的处理方式是使用函数式更新来修改size，这样就不需要将size加入依赖数组：

useEffect(() => {
    if (inView) {
      setSize(prevSize => prevSize + 1)
    }
}, [inView, setSize])

函数式更新会自动接收当前的size值作为参数，你只需要基于这个值计算新状态即可。这种写法既符合React的依赖规则（控制台不会再弹出警告），又能避免无限循环，因为effect的依赖只有inView和setSize——setSize是由React稳定提供的函数，不会频繁变化，只有当inView状态改变时，effect才会执行。

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