Using eslint-plugin-react-hooks together with eslint-plugin-react-compiler

[atomrevival]

Hi all! Just started experimenting with the React Compiler and was wondering if the rules for exhaustive deps are correct when using the compiler?

I assumed that it wasn't necessary to use useCallback anymore on a function as a dependency, but the eslint-plugin-react-hooks plugin doesn't seem to agree? (Trying out the RC version 5.1.0-rc-8269d55d-20240802 as well just to see if I missed anything). Should I use this plugin at all when using the compiler?

Given the code below:

// ESLint: The 'myFunction' function makes the dependencies of useEffect Hook change on every render. 
// To fix this, wrap the definition of 'myFunction' in its own useCallback() Hook.
// (react-hooks/exhaustive-deps)
const myFunction = () => {
   // do something
};

useEffect(() => {
   myFunction();
}, [myFunction]); // Function as dependency

[poteto]

Sorry about the late response! Yeah, you can disable the exhaustive-deps rule if you're using the compiler's linter. The rules of hooks eslint rule is still helpful to have, although in most cases the compiler's linter should catch them too.

It's a little duplicative right now but we are planning on merging these plugins in the near future. Thanks for the feedback!

[ahkhanjani]

Sorry about the late response! Yeah, you can disable the exhaustive-deps rule if you're using the compiler's linter. The rules of hooks eslint rule is still helpful to have, although in most cases the compiler's linter should catch them too.

Coming from facebook/react#31475. Shouldn't this be documented somewhere for the time being? The react compiler page in the official docs could include this

[Ganbin]

The issue I have with disabling the exhaustive-deps rule, is that it will correctly remove such error message:

Caution

The 'defaultValues' object makes the dependencies of useEffect Hook (at line 130) change on every render. To fix this, wrap the initialization of 'defaultValues' in its own useMemo() Hook. eslint(react-hooks/exhaustive-deps)

But it will fail to catch missing dependencies for our useEffect like :

Caution

React Hook useEffect has a missing dependency: 'form'. Either include it or remove the dependency array. eslint(react-hooks/exhaustive-deps)

I think the issue is that the rule is doing 2 different things. I hope the react-compiler linter will be able to show only the second error message. As of today, if I disable the react-hooks/exhaustive-deps the react-compiler linter doesn't catch the missing useEffect dependencies.

[alicerocheman]

Hi,
I'm also struggling with this issue, @poteto do you have any idea of a timeline for these plugins to be merge / the exhaustive deps issue to be resolved?
Thanks