我可以为自定义钩子设置react-hooks/exhaustive-deps吗？

html5 • • 问答

我写了这个钩子（可能有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需要位于依赖项数组中。

回答

这应该很容易。该文件说：

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

所以你想要这样的东西：

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

  • Oh man, why didn't I read the docs! Thank you so much!
以上是我可以为自定义钩子设置react-hooks/exhaustive-deps吗？的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>