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

Question

这个hook是我写的（可能有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;
}

有什么方法可以使这个钩子的 exhaustive-deps 规则 lint 用法？

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

在这个用法中，我想收到 a、b 和 c 需要在依赖项数组中的通知。

Answer 1

应该很简单。 documentation says:

exhaustive-deps can be configured to validate dependencies of custom Hooks with the additionalHooks option. This option accepts a regex to match the names of custom Hooks that have dependencies.

所以你想要这样的东西：

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