使用useEffect时如何处理依赖数组引发的React控制台告警

问题原因 #

React 官方的 ESLint 规则 react-hooks/exhaustive-deps 会默认检查 useEffect 回调内用到的所有外部变量，要求全部加入依赖数组，目的是避免闭包陷阱带来的逻辑错误，这就是你看到告警的核心原因。

解决方案 #

可以根据你的变量类型和实际业务场景，选择下面任意一种适配方案：

• 如果varA是你通过useState声明的状态变量
  你可以用状态更新的函数式写法规避对varA本身的依赖，状态更新函数是引用稳定的，不需要加入依赖数组：

  useEffect(()=> {
    setVarA(prevVarA => {
      // 这里基于旧的varA值计算新值，执行你需要的操作
      const newVarA = 对prevVarA处理后的结果
      return newVarA
    })
  }, [varB])
  // 绝大多数场景下useState返回的setter都是稳定引用，不需要额外加入依赖数组
  

• 如果varA是不需要触发渲染的普通可变变量
  用useRef包裹varA，useRef返回的对象本身引用永远稳定，不需要加入依赖数组：

  const varARef = useRef(初始值)
  useEffect(()=> {
    // 直接操作current属性即可
    DO SOMETHING TO varARef.current;
  }, [varB])
  

• 如果你已经完全确认当前逻辑不会有闭包问题，不需要遵循依赖检查规则
  可以直接加注释临时禁用该行的 ESLint 检查，这是下策，建议确认逻辑无误后再使用：

  useEffect(()=> {
    DO SOMETHING TO varA;
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [varB])
  

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