react-hooks/exhaustive-deps suggesting wrong dependency

[donaldpipowitch]

Do you want to request a feature or report a bug?

bug

What is the current behavior?

The react-hooks/exhaustive-deps rule suggests an incorrect dependency.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

function useSomething(search: string) {
  const request = useAxios({ url });

  useEffect(() => {
    if (search.length >= 3) {
      request.execute();
    }
  }, [request.execute, search]); // missing dependency `request` is shown

  useEffect(() => {
    if (request.response) {
      console.log('success');
    }
  }, [request.response]);

  return { request };
}

What is the expected behavior?

request.execute should be fine as a dependency, just like request.response. However I get a warning that I should use request as a dependency which is wrong (it changes more often than request.execute and I just use request.execute in my effect).

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

eslint-plugin-react-hooks@2.0.1

[threepointone]

This isn't a bug, it's working as designed. Our recommendation for stuff like this is to destructure the parts that you need -

const {execute, response} = useAxios({ url });

[donaldpipowitch]

Would a better "--fix" be auto-destructering instead of auto-adding "request" to the dependencies in that case? And can you explain why it works in the second case? I can't see a difference except that one is a function call.

Thank you!

[donaldpipowitch]

If anyone is interested: here is the same issue with a little bit more explanation: #15924