Bug: eslint-plugin-react-hooks exhaustive-deps rule shouldn't warn when using an object's property

[julienw]

eslint-plugin-react-hooks version: 4.6.0

Example code:

import { useCallback } from "react";
import { useFetcher } from "react-router-dom";

...
    const fetcher = useFetcher();
    const onClick = useCallback(() => fetcher.submit(XXX), [fetcher.submit]);
    //  warning  React Hook useCallback has a missing dependency: 'fetcher'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

This is the recommended way of specifying the dependency for this method, see remix-run/react-router#10336.

Expected

There's no warning.

Thanks!

[billyjanitsch]

This is by design. fetcher.submit(...) passes fetcher to the method call as this, so the rule is correct to require fetcher as a dependency. You can destructure to get a function that can be used as a dependency:

const fetcher = useFetcher();
const {submit} = fetcher
const onClick = useCallback(() => submit(XXX), [submit]);

See #16265, as well as #20755 for a proposal to make this configurable.

[julienw]

Ah interesting ! Yes I see the point.
Indeed I didn't want to do what you suggest because I wasn't sure if a proper this was needed... but failed to make the connection 😂

I'm closing the issue then. Hopefully this could help other folks though.

[julianhille]

whoever reaches here:
do not use fetcher as a dependecy the fetcher object is not stable and if you do something like

const fetcher = useFetcher();

useEffect(() => {...}, [fetcher])

that will cause the useEffect to be called everytime as fetcher changes everytime.