Conflict between compiler memoization and eslint rules needs resolution.
The issue describes a conflict between React Compiler's automatic memoization and eslint-plugin-react-hooks' dependency checks. The solution likely involves modifying the eslint plugin to detect compiler usage and adjust its behavior. The main challenge is understanding both systems' internals and coordinating changes.
https://github.com/kaguya3222/react-compiler-exhaustive-deps-repro
pnpm installpnpm linterror The 'logCount' function makes the dependencies of useEffect Hook (at line 22) change on every render. To fix this, wrap the definition of 'logCount' in its own useCallback() Hook react-hooks/exhaustive-deps
App.tsx file has a component named App. In this component we have a function logCount, used in useEffect. react-hooks/exhaustive-deps says: React Hook useEffect has a missing dependency: 'logCount'. Either include it or remove the dependency array.. After adding it to dependency array it says: The 'logCount' function makes the dependencies of useEffect Hook (at line 22) change on every render. To fix this, wrap the definition of 'logCount' in its own useCallback() Hook.
The problem is that I don't need to wrap this function into a useCallback, because compiler will do it for me.
Disabling eslint at the line of logCount definition is an option, but I don't think it's a good approach in the long term.
Every time
19.2.0
1.0.0
Claim this issue to let others know you're working on it. You'll earn 10 points when you complete it!