React useCallback未知依赖警告原因及useMemo解决方案原理解析

• React 配套的 react-hooks/exhaustive-deps ESLint 校验规则，需要静态分析传入 useCallback 的函数内部的依赖引用，来校验依赖数组的完整性。该规则仅支持解析直接传入的内联函数，无法穿透第三方库的函数调用逻辑。
• 你传入 useCallback 的是 memoize() 执行后返回的动态生成函数，静态分析阶段无法识别该函数内部的依赖，因此触发了「依赖未知，请传入内联函数替代」的警告。
• 同时 useCallback 的设计定位就是直接缓存传入的回调函数本身，不接收其他函数执行返回的结果作为入参，你的用法本身不符合 useCallback 的设计预期。

错误代码示例：

let memoizedCb = React.useCallback(
  memoize((param) => () => someFunction(param)),
  []
);

• useMemo 的作用是缓存任意计算逻辑的返回值，它的校验规则只需要分析传入的第一个参数（内联工厂函数）的内部依赖即可。
• 优化写法中 useMemo 的第一个参数是明确的内联函数，ESLint 可以正常分析内部引用：memoize 是导入的第三方库常量、someFunction 定义在组件外部，都属于稳定引用不需要加入依赖数组，因此不会触发警告。
• 两种写法最终得到的都是引用稳定、经过 memoize 处理的回调函数，业务效果完全一致，只是 useMemo 的写法符合 React 的静态检测规则和 API 设计定位。

正确代码示例：

const memoizedCb = React.useMemo(
  () => memoize((param) => () => someFunction(param)),
  []
);
// 注：someFunction 定义在函数组件外部，无需作为依赖项声明

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