Bug: eslint(react-hooks/exhaustive-deps) wrong deps with optional chained function calls
See original GitHub issueReact version: 16.13.1
Steps To Reproduce
Every time optional chaining is used with a function call, the function itself is detected by the rule.
// users is optional...
const someContext = {
users: Math.random() > 0.5 ? [{name: 'test'}] : undefined,
};
const filteredUsers = useMemo(() => {
return someContext.users?.filter((u) => u.name.startsWith('a'));
}, [someContext.users]);
The current behavior
v4.0.1 and above of eslint-plugin-react-hooks
tells me to change the dep to someContext.users?.filter
.
The expected behavior
Allow me to keep using someContext.users
. I can imagine scenarios where I would want the looked up symbol, but that’s probably less common than depending on the uniqueness of the instance.
Observations
Probably regressed due to https://github.com/facebook/react/pull/18820, but I’m not sure.
Issue Analytics
- State:
- Created 3 years ago
- Reactions:16
- Comments:17 (4 by maintainers)
Top Results From Across the Web
React ESLint is still throwing no-unused-expressions with ...
I have a function call that uses optional chaining const index = [1, 2, 3, 4] media.name?.forEach((m) => { if (index.includes(m)) ...
Read more >no-unsafe-optional-chaining - Pluggable JavaScript Linter
A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease.
Read more >Rules of Hooks - React
Don't call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function, before any...
Read more >You're overusing useMemo: Rethinking Hooks memoization
In some cases, useMemo is irrelevant, overused, and harmful to your application performance. Learn these situations and how to avoid them.
Read more >eslint-config-torchbox - npm
Shareable ESLint config following Torchbox's code style. ... no-unsafe-optional-chaining: error, disallowArithmeticOperators: true ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
still happening in
eslint-plugin-react-hooks@4.0.4
Still happening here too. The fix seems to only work for
useEffect
.useMemo
anduseCallback
are still triggering the same warnings:If I remove
[a]
in theuseMemo
version, it then tells me I need to adda?.b
as a dependency.