question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Bug: eslint(react-hooks/exhaustive-deps) wrong deps with optional chained function calls

See original GitHub issue

React 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:closed
  • Created 3 years ago
  • Reactions:16
  • Comments:17 (4 by maintainers)

github_iconTop GitHub Comments

7reactions
vadzimcommented, May 28, 2020

still happening in eslint-plugin-react-hooks@4.0.4

3reactions
dmarkowcommented, May 27, 2020

Still happening here too. The fix seems to only work for useEffect. useMemo and useCallback are still triggering the same warnings:

useEffect(() => {
  console.log(a?.b);
}, [a]) // No errors

var c = useMemo(() => {
  return a?.b;
}, [a]) // React Hook useMemo has an unnecessary dependency: 'a'. Either exclude it or remove the dependency array

If I remove [a] in the useMemo version, it then tells me I need to add a?.b as a dependency.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found