如何让自定义Hook支持react-hooks/exhaustive-deps规则校验

实现原理 #

react-hooks/exhaustive-deps 规则本身就设计了自定义Hook的扩展识别能力，不需要修改规则源码，仅需通过官方提供的配置项明确告知工具你的自定义Hook的参数约定，就能获得和内置useCallback、useMemo完全一致的依赖完整性校验能力。

具体配置步骤 #

• 在项目的ESLint配置文件中，定位到react-hooks/exhaustive-deps的规则配置块，添加additionalHooks正则匹配规则
• 规则的内置识别逻辑是：凡是被正则命中的自定义Hook，会自动将该Hook调用的最后一个数组类型参数，判定为需要校验的依赖数组，执行和内置Hook完全一致的闭包依赖追踪检查
  对应的配置写法参考：

// ESLint 配置内的规则片段
"react-hooks/exhaustive-deps": ["warn", {
  "additionalHooks": "useThrottledCallback"
}]

你当前写的自定义Hook的参数结构，刚好完全匹配规则的识别预期：

• 参数顺序为（传入的回调函数, 节流延迟时长, 依赖数组）
• 依赖数组作为用户调用时传入的最后一个顶层参数
  所以完全不需要调整Hook本身的参数设计，配置写入后规则就能正确定位依赖数组的位置。

实际校验表现 #

配置生效后，当你书写如下代码：

// 回调闭包内引用了外部变量a、b、c
useThrottledCallback(() => (a + b + c), 100, [])

ESLint会输出和内置Hook完全同款的提示：当前Hook的依赖数组缺失a、b、c三个变量，要么将这些变量补充到依赖数组中，要么调整回调逻辑移除对这几个变量的引用，完全实现你期望的校验效果。

需要留意的细节 #

• 自定义Hook的参数顺序需要和规则的识别逻辑对齐：依赖数组必须是用户显式传递的顶层参数，且位于参数列表的最后位置。如果参数顺序错位，规则将无法定位依赖数组，自然也无法触发校验
• 不要在Hook内部隐式拼接依赖数组，必须把依赖数组的定义权交给调用方，否则规则无法追踪到闭包内引用的外部变量是否被完整纳入依赖
• 你当前Hook实现里的节流清理逻辑是合理的：在回调更新、组件卸载时执行节流实例的cancel操作，可以避免旧的闭包残留引发的状态更新泄漏问题

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