React useEffect传props.xxx作依赖为何提示缺失props依赖？

1. props.onAddedComment触发依赖警告的原因 #

这个警告来自eslint-plugin-react-hooks的exhaustive-deps规则，规则对组件入参props做了特殊的静态检测逻辑设计：

• 当useEffect回调中通过props.xxx的链式写法访问属性时，规则的静态分析会首先判定你引用了整个props根对象，再读取其下属性。即使你已经把props.onAddedComment写入依赖数组，规则也不会将这种嵌套属性引用判定为对props根对象的合法依赖声明——静态分析无法在编译阶段预判你后续是否会在回调中新增其他props属性的访问，进而漏写依赖。
• 这里需要明确：直接在依赖数组中写props.onAddedComment的运行时行为是完全符合预期的，React本身只会对比onAddedComment的引用变化，不会关联整个props对象，警告只是静态检测的提示，不是运行时错误。规则推荐解构props的本质是让静态分析可以明确追踪到你实际使用的具体props字段，既避免漏写依赖，也避免误把整个props对象加入依赖导致effect无意义重复触发。
  符合规则要求的写法如下：

  const { onAddedComment } = props;
  useEffect(() => {
    if (status === "completed" && !error) 
      onAddedComment();
  }, [status, error, onAddedComment]);
  

2. params.quoteId不触发同类警告的原因 #

路由hook返回的params对象（比如react-router中useParams()的返回值）和组件入参props在规则中的标记完全不同：

• exhaustive-deps规则仅将React组件的入参props、函数组件内兼容类组件写法通过this.props访问的props对象标记为“特殊校验对象”，对这类对象执行最严格的依赖校验。
• 对于从自定义hook、第三方hook（比如路由的useParams）、普通state中拿到的普通对象，规则不会做特殊校验：只要你把回调中用到的具体嵌套属性写入依赖数组，规则就会判定依赖声明完整，不会要求必须先解构根对象。

• 不存在“只要使用props下的属性作为useEffect依赖就必须先解构”的强制要求：如果不处理这个ESLint警告，直接使用props.onAddedComment作为依赖的代码运行时不会有任何逻辑问题。但按照规则推荐的写法提前解构props，既可以消除警告，也能让组件依赖的props字段更清晰，降低后续维护时漏写依赖的概率。
• 禁止为了消除警告直接将整个props对象写入依赖数组：父组件每次重渲染都会生成新的props对象引用，会导致effect在每次组件渲染时都触发，完全不符合副作用的触发预期。

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