React useCallback已声明对应依赖仍报缺失props依赖告警问题咨询

告警原因 #

这个告警是ESLint的react-hooks/exhaustive-deps规则的静态检测逻辑导致的：

• 你在useCallback的回调函数中直接通过props.xxx的形式访问属性，静态分析工具无法精准判断你是否只依赖这两个属性，也无法确认你访问的属性和你写入依赖数组的props.positionFunc、props.closeFunc是否完全对应
• 规则会默认将你访问的顶层对象props识别为潜在依赖，所以才会提示你将整个props加入依赖数组

你的理解是完全正确的 #

确实只需要将回调中实际用到的两个方法作为依赖即可，将整个props加入依赖数组是非常不推荐的写法：只要任意一个props发生变化，useCallback就会重新生成，完全失去了缓存函数的意义，反而会带来不必要的性能损耗。

正确的修复方式 #

按照告警提示的推荐方案，在组件顶层先把需要用到的属性从props中解构出来，再在useCallback中引用解构后的变量即可：

// 组件顶层先解构
const { positionFunc, closeFunc } = props;

// 再编写useCallback
const onPositive: () => void = useCallback(() => {
  positionFunc();
  closeFunc();
}, [positionFunc, closeFunc]);

这种写法下，回调函数引用的是组件顶层解构出来的常量，ESLint可以明确检测到依赖只有这两个变量，不会再触发告警，也符合useCallback的依赖更新逻辑，只有当positionFunc或者closeFunc本身发生变化时，才会重新生成回调函数，实现正确的缓存效果。

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