为何useEffect需指定依赖项？依赖循环与ESLint警告解析

问题背景 #

你遇到的ESLint警告本质是React Hook的依赖检查机制在起作用，先整理你给出的两个代码场景：

场景1：挂载时的初始数据获取 #

const preFlight = useRef(true);

useEffect(() => {
  if(preFlight.current){
    preFlight.current = false;
    readingsStore.getDeviceIds();
  }
}, [])

ESLint提示缺少readingsStore依赖，但你认为这是挂载时仅执行一次的逻辑，添加依赖无意义。

场景2：依赖selectedDevice的effect #

useEffect(() => {
  selectedDevice && readingsStore.setHistoricFilter({deviceKey: selectedDevice} as HistoricFilter)
}, [selectedDevice])

同样被要求添加readingsStore到依赖数组。

同时你想了解：为什么useEffect需要依赖项？依赖项会引发无限循环的原因是什么？

逐个场景解析 #

场景1：为什么要加readingsStore依赖？ #

ESLint的警告不是无意义的——它不知道readingsStore的引用是否稳定。如果readingsStore是每次组件渲染都会重新创建的对象（比如在组件内部直接定义的普通对象），那你现在的写法会让effect捕获到旧的store引用，后续调用getDeviceIds可能无法正确更新状态。

但如果readingsStore是来自全局状态管理工具（比如Zustand、Redux、MobX）的实例，它的引用通常是稳定的——这时候把它加入依赖数组完全没问题，不会导致effect重复执行（因为引用没变化），还能消除警告。

如果你确定readingsStore绝对稳定，也可以用ESLint注释临时忽略警告，但不推荐（除非你能100%保证引用不会变）：

useEffect(() => {
  if(preFlight.current){
    preFlight.current = false;
    readingsStore.getDeviceIds();
  }
}, []) // eslint-disable-line react-hooks/exhaustive-deps

场景2：为什么依赖selectedDevice还要求加readingsStore？ #

React的useEffect规则很明确：effect回调里用到的所有外部变量，都必须加入依赖数组。不管你已经加了哪些依赖，只要回调里用到了readingsStore，它就必须出现在依赖列表里——否则会出现闭包陷阱：比如当readingsStore更新后，effect还是用的旧引用，导致逻辑出错。

同样，如果readingsStore是稳定引用，加进去不会有副作用：只有当selectedDevice变化时，effect才会重新执行，readingsStore不变的话不会触发额外执行。

为什么useEffect需要依赖项？ #

React的useEffect是基于闭包工作的：每次组件渲染时，effect的回调函数会捕获当前渲染周期的所有变量值。依赖数组的作用是告诉React：当这些变量的值（或引用）发生变化时，需要重新创建effect回调，并执行它。

如果不声明依赖，或者依赖不全，会导致：

• effect回调一直使用旧的变量值，和组件当前状态不一致
• 本该触发的effect不执行，逻辑滞后

举个例子：如果你在effect里用了组件的state，但没把它加入依赖，当state更新后，effect还是用的旧state值，就会出现bug。

依赖项引发无限循环的原因 #

无限循环通常是因为依赖项在每次渲染时都会改变，且effect里的逻辑会触发组件重新渲染，形成闭环：

1. 组件渲染，创建新的依赖项（比如对象、数组、未用useCallback包裹的函数）
2. 依赖项变化，触发effect执行
3. effect里的逻辑（比如调用setState）导致组件重新渲染
4. 回到步骤1，循环往复

常见场景：

• 直接在组件里定义对象并作为依赖：const filter = { key: 'xxx' }; useEffect(() => {}, [filter])——每次渲染filter都是新对象，引用变化
• effect里更新了某个状态，而这个状态又在依赖数组里：useEffect(() => { setCount(count + 1) }, [count])——每次count更新，effect执行，又更新count，无限循环
• 未用useCallback包裹的函数作为依赖：组件每次渲染都会重新创建函数，导致依赖变化

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