eslint-plugin-react-hooks is giving unexpected errors (react-hooks/exhaustive-deps)

Question

I have an issue where my vscode eslint is giving me wrong warnings. I have a simple function in react component which I am trying to optimize with useCallBack hook.

Here is the simple function where I am getting two props and there are being used in params object I create and as per the documentation, I am putting those two props as dependencies of useCallBack.

const Test = ({ ReportAddressNumber, ClientNumber }) => {
const [test, setTest] = useState({ count: 0 });
const fetchSampleIDs = useCallback(() => {
  setTest(true);
  const URL = `/Samples`;
  const params = {
    ReportAddressNumber,
    ClientNumber,
  };

  fetch(URL, params)
}, [ClientNumber, ReportAddressNumber]);

useEffect(() => {
  fetchSampleIDs();
}, [fetchSampleIDs]);

 return <h1>{test.count}</h1>;
};

Now the issue is in vscode it's telling me that those two props are unnecessary as dependencies in useCallback.

React Hook useCallback has unnecessary dependencies: 'ClientNumber' and 'ReportAddressNumber'. Either exclude them or remove the dependency array.eslint(react-hooks/exhaustive-deps)

I am able to reproduce this with my .eslintrc and package.json file. I have created this codesandbox to play with this and in order to see the actual issue, you need to export the codesanbox as zip and run npm install and look at it in vscode.

https://codesandbox.io/s/kind-mahavira-fvsub

I am appreciating your knowledge and contribution here, Thank you.

Answer 1

After spending 4 hours finally I got the answer.

There is a conflicting dependency. I am using eslint-config-airbnb: 16.1.0 which does not include any react-hooks linting configurations. However, I had installed the eslint-plugin-react-hooks on my own which was conflicting with eslint-config-aribnb versions.

upgrading eslint-config-airbnb as per instruction fixes my issue. In case if anyone have same issue.