React中useEffect/useCallback依赖仅传所用props属性而非整个对象是否正确？

这种写法完全正确，而且是React官方推荐的最佳实践。

核心原因： #

• React依赖数组的作用是追踪回调内部实际用到的变量，只有当这些变量的值发生变化时，才会重新执行effect或更新callback。只传入props.someValue，能确保只有这个具体属性变化时才触发逻辑，避免不必要的重渲染。
• 如果把整个props对象作为依赖，哪怕父组件传入的props里其他无关属性变化（或者props对象本身引用更新但目标属性没变），都会触发effect重新执行，造成无意义的性能损耗。

关于ESLint的提示： #

你遇到的ESLint要求传入整个props的提示大概率是误判，或者是react-hooks/exhaustive-deps规则的配置问题。正常情况下，该规则会识别到props.someValue是回调内唯一用到的变量，应该将其作为依赖，而非要求传入整个props对象。你可以检查ESLint插件版本，或者确认代码中是否有间接用到props其他属性的情况（比如回调里隐式访问了props的其他字段但没注意到）。

正确写法示例： #

function Component(props) {
  useEffect(() => {
    console.log(props.someValue)
  }, [props.someValue]) // 仅传入实际用到的属性
  return <div>{props.someValue}</div>
}

不推荐的写法： #

function Component(props) {
  useEffect(() => {
    console.log(props.someValue)
  }, [props]) // 传入整个props对象，易触发不必要的执行
  return <div>{props.someValue}</div>
}

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