React: [eslint-plugin-react-hooks] Bug: warning on `useWithoutEffectSuffix`

Created on 13 May 2020  Â·  2Comments  Â·  Source: facebook/react

With [email protected] I observe an unexpected warning
on useWithoutEffectSuffix hook call.

Steps To Reproduce

  1. yarn create react-app hooks-bug
  2. cd hooks-bug
  3. npm run eject
  4. npm i [email protected]
  5. place code from the examples below into src/App.js
  6. run npx eslint src/App.js
  7. check output for warnings mentioned below

Code example:

function App(props) {
  useWithoutEffectSuffix(props, {});
  return null;
}

function useWithoutEffectSuffix() {}

export default App;

npx eslint src/App.js

./src/App.js
2:3 warning React Hook useWithoutEffectSuffix has a missing dependency: 'props'. Either include it or remove the dependency array react-hooks/exhaustive-deps

✖ 1 problem (0 errors, 1 warning)

The current behavior

react-hooks/exhaustive-deps warning triggered on a custom hook which contains
-Effect- in the middle of it's name (but does NOT contain it as a suffix).

The expected behavior

I would expect react-hooks/exhaustive-deps to succeed without warning on
a custom hook which contains -Effect- in the middle of it's name (but does NOT
contain it as a suffix).

I was under impression that only -Effect suffix should be reserved because of
the following quotes:

I think ideally we'd reserve Effect suffix for things that mirror the dependency API

@gaearon's reply on another issue

New Violations: Check dependencies for all Hooks ending with Effect.

changelog entry

In case I got something wrong and the plan is to reserve Effect word
completely (anywhere in custom hook's name), then we at least need to correct
Changelog accordingly.

ESLint Rules Bug

All 2 comments

Would you like to submit a failing test case and/or a fix? You can search for ExhaustiveDeps-test.js in the codebase. That would be very helpful!

Appreciate you did the work! I was feeling a bit tired today and this was really nice.

Was this page helpful?
0 / 5 - 0 ratings