React useEffect更新state报缺少依赖且加依赖会无限循环如何解决

你遇到的这个场景可以直接使用useState更新函数的回调写法解决，这也是这类需求的官方推荐方案：
React 中useState返回的状态更新函数支持传入一个回调作为参数，这个回调会自动接收到更新前的最新状态值作为入参，你不需要手动引入外部的状态变量，就能基于旧值计算新值。

你的示例代码修改后如下：

const [myState, setMyState] = useState("");
const [counter, setCounter] = useState(0);

useEffect(() => {
  // 传入回调，prevCounter 是更新前的最新 counter 值
  setCounter(prevCounter => prevCounter + 1);
}, [myState]) 

修改后就可以同时解决两个问题：

• 不需要把counter加入依赖数组，不会触发无限循环
• ESLint 不会再报依赖缺失的警告，因为 useEffect 作用域内确实没有用到外部的counter变量
• 拿到的永远是最新的状态值，不会出现闭包导致的旧值问题

如果遇到更复杂的多状态依赖场景，你也可以用useRef同步保存状态的最新值，避免在依赖数组里加变量：

const [counter, setCounter] = useState(0);
const counterRef = useRef(counter);

// 同步状态到 ref
useEffect(() => {
  counterRef.current = counter;
}, [counter])

// 其他副作用中直接读取 ref 的值，不需要加 counter 到依赖
useEffect(() => {
  setCounter(counterRef.current + 1);
}, [myState])

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