React.js将setState作为prop传递引发useEffect依赖警告的处理方案

报错核心原因 #

你当前在useEffect内部直接通过props对象的嵌套路径读取属性，eslint的react-hooks/exhaustive-deps规则会检测useEffect作用域内引用的所有外部变量：你在副作用逻辑里用到了props.setSomeState，但依赖数组只声明了props.user，因此判定依赖列表不完整。如果图省事直接把整个props对象塞进依赖数组，会导致组件接收到的任何无关props变化都触发副作用，完全违背你仅在user变更时才执行数据更新的设计目标。

分步实现 #

• 第一步：在组件函数的*顶层（所有Hook调用之前的位置）*完成props解构，把useEffect实际用到的属性提取为独立的顶层变量，不要在useEffect内部直接读取props.xxx的嵌套路径：

// 组件函数顶层，不是useEffect内部
function PlaceDataInIndexDB(props) {
  // 仅提取副作用逻辑需要的属性，拆成独立变量
  const { setSomeState, user } = props

• 第二步：把解构出的独立变量作为useEffect的依赖项，不要写带对象路径的嵌套引用：

useEffect(() => {
    // 直接使用顶层解构出来的独立变量
    setSomeState([/* 你的目标更新数组 */])
    // 依赖直接写独立变量名，不要写props.setSomeState、props.user这类嵌套路径
  }, [setSomeState, user])

方案有效性说明 #

• 解构为独立顶层变量后，eslint的依赖检测逻辑会直接追踪这些独立变量，不会再要求你把整包props加入依赖，从根源上消除规则警告
• 对于user变量：只有本身值发生变化时，才会触发依赖比对的变更，完全符合你最初只在用户信息更新时同步数据的需求
• 对于setSomeState变量：它是父组件通过useState返回的状态设置函数，React框架天然保证这类函数的引用是跨渲染稳定的——哪怕父组件因为其他逻辑重渲染，这个函数的引用地址永远不会变，根本不会额外触发useEffect执行

注意事项 #

不要为了消警告直接关闭react-hooks/exhaustive-deps规则，也不要把整包props塞入依赖数组：整包props入参会让组件接收到任何无关props变更时都执行副作用，带来不必要的性能损耗甚至逻辑bug。
如果遇到特殊场景下setSomeState不是React原生useState返回的稳定函数，而是父组件自定义的普通函数，可以在父组件用useCallback把这个函数包一层保证引用稳定，避免无意义的额外触发。

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