Description
React version: 19.1.0
Steps To Reproduce
- Create eg. const {push}= useRouter()
- Use that setter inside a
useEffect
oruseCallback
or another hook - Leave the dependency array empty or intentionally exclude the function
- Observe a warning from
react-hooks/exhaustive-deps
Example:
const {push}= useRouter()
useEffect(() => {
// do something
push("something"); // I don't need to add `push` to dependencies, but I get a warning
}, []);
The current behavior
The linter produces a warning:
React Hook useEffect has a missing dependency: 'push'. Either include it or remove the dependency array.
Even though "push" is a stable function, the linter still suggests adding it. The current workaround is to disable the rule entirely for that line:
// eslint-disable-next-line react-hooks/exhaustive-dep
However, this disables the entire rule, which increases the risk of overlooking important dynamic dependencies in more complex hooks.
The expected behavior
I’d like to have a way to ignore specific values in the dependency array without disabling the whole rule.
For example, something like:
// eslint-disable-next-line react-hooks/exhaustive-deps --ignore push
This would allow developers to suppress false positives selectively, while still benefiting from the rule’s guidance on other dependencies.
Why this matters
- It avoids the risk of over-disabling the rule entirely with eslint-disable-next-line.
- It allows safe, intentional handling of well-known stable values (e.g., setState, context dispatchers, router methods).
- It improves the developer experience, especially in large codebases using hooks heavily.
Thank you for considering this feature!