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

Posted 2023-03-27

【中文标题】我可以为自定义挂钩提供 react-hooks/exhaustive-deps 吗？

【英文标题】：Can I have react-hooks/exhaustive-deps for a custom hook?

【发布时间】：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 列表作为常规参数传递，但您可以在我的使用示例中看到我最终没有这样做。不错的收获！

【参考方案1】：

这应该很容易。 documentation says：

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

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

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

【讨论】：

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