useEffect依赖数组应传入全部关联值还是仅传入触发变更的参数？

核心结论 #

请严格遵守React文档要求的依赖数组规则，不要随意省略内部用到的参与React数据流的变量。你当前场景下看起来省略依赖没有问题，只是尚未触发闭包陷阱，后续需求迭代时极易出现难以排查的过时值问题，收益远低于风险。

你给出的示例场景的优化方案 #

你提到的需要仅在count变化时更新innerCount的场景，完全不需要额外加校验逻辑，也不需要违背依赖规则，用setState的函数式更新写法即可解决：

function Component({ count }) {
  const [innerCount, setInnerCount] = useState(0);

  useEffect(() => {
    // 用函数式更新读取旧值，不需要直接引用innerCount变量
    setInnerCount(prevInnerCount => prevInnerCount + 1);
  }, [count]); // 仅保留count作为依赖即可，符合ESLint检查规则

  return <div>
    <span>Count: {count}</span>
    <span>innerCount: {innerCount}</span>
  </div>;
}

函数式更新的回调可以拿到状态的最新值，不需要在useEffect的上层作用域引用状态变量，自然也就不需要将它加入依赖数组，完美匹配你的需求。

其他类似场景的通用解决方案 #

如果遇到确实需要在useEffect中读取最新状态、又不希望该状态触发effect执行的场景，可以用以下合规方案处理，不需要忽略依赖规则：

• 用useRef存储需要读取的最新值：每次渲染时将状态赋值给ref.current，useEffect中直接读取ref.current即可，ref不属于React响应式数据流的变量，不需要加入依赖数组
• 如果逻辑复杂度较高，可以封装usePrevious钩子记录上一次触发依赖的值，在effect内部判断当前依赖值和旧值是否发生变化，只有变化时才执行核心逻辑，此时将所有用到的变量加入依赖数组也不会出现误执行的问题

为什么不建议忽略依赖规则 #

你当前的简单场景下省略innerCount确实不会出问题，但只要逻辑稍加改动就会触发过时值问题：比如在useEffect中加入定时器、异步请求等逻辑，回调执行时拿到的就会是依赖声明时的旧值，这类闭包问题排查成本极高。严格遵守依赖规则可以从根源上避免这类问题，且官方ESLint插件已经覆盖了90%以上的场景的自动修复提示，不会带来过高的额外开发成本。

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