我可以為自定義掛鈎使用 react-hooks/exhaustive-deps 嗎？

Question

我寫了這個鈎子（可能有錯誤，我還沒有使用它）：

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 rule lint 用法？

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

在此用法中，我希望收到通知a 、 b和c需要位於依賴項數組中。

Answer 1

這應該很容易。 文件說：

exhaustive-deps可以配置為使用 additionalHooks 選項驗證自定義 Hooks 的依賴性。 此選項接受一個正則表達式來匹配具有依賴性的自定義掛鈎的名稱。

所以你想要這樣的東西：

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