我可以为自定义挂钩提供 react-hooks/exhaustive-deps 吗？答案

【问题标题】：Can I have react-hooks/exhaustive-deps for a custom hook?我可以为自定义挂钩提供 react-hooks/exhaustive-deps 吗？
【发布时间】：2021-04-18 18:36:15
【问题描述】：

这个钩子是我写的（可能有bug，我还没用过）：

import { useCallback, useEffect } from 'react';
import _throttle from 'lodash/throttle';

export function useThrottledCallback(cb, delay, ...deps) {
  const callback = useCallback(_throttle(cb, delay), deps);

  useEffect(() => {
    const lastCallback = callback;

    return () => lastCallback.cancel();
  }, [callback]);

  return callback;
}

有没有办法可以让这个钩子的穷举-deps 规则 lint 用法？

useThrottledCallback(() => (a + b + c)}, 100, [])

在这种用法中，我想知道a、b 和c 需要在依赖数组中。

【问题讨论】：

其实有个bug，你不想...你的部门：((x,y,...z) =>[x,y,z])(1, 2,[3]) === [1,2,[[3]]]
啊，说得好。我想我最初打算将 deps 列表作为常规参数传递，但您可以在我的使用示例中看到我最终没有这样做。不错的收获！

标签： reactjs react-hooks eslint eslint-plugin-react-hooks

【解决方案1】：

这应该很容易。 documentation says：

exhaustive-deps 可以配置为使用 additionalHooks 选项验证自定义 Hook 的依赖关系。此选项接受一个正则表达式来匹配具有依赖关系的自定义 Hook 的名称。

所以你会想要这样的东西：

{
  "rules": {
    // ...
    "react-hooks/exhaustive-deps": ["warn", {
      "additionalHooks": "useThrottledCallback"
    }]
  }
}

【讨论】：

天哪，我为什么不阅读文档！非常感谢！