profile
viewpoint

Ask questionsBug: react-hooks/exhaustive-deps lint rule not working as expected

This issue is related to the react-hooks/exhaustive-deps not detecting a reasonable case of warnings regarding missing dependencies.

image

The App contains two Children (One is the "increment" button where clicking on it will increment the value and the other child have an alert button to show the current value) while showing the current value also in the Parent component.

React version: 16.12.0

Steps To Reproduce

  1. Go to the CodeSandbox below.
  2. Click on "increment" button to update the value multiple times.
  3. Click on the "Alert Current Value" to alert the recent value from the context.

Link to code example: https://codesandbox.io/s/react-fp-context-usecallback-deps-zsoet?file=/src/Child2.js

The current behavior

1- react-hooks/exhaustive-deps don't report a missing dependencies. image

2- The alerted value is the initial value (0) because of the stale closure even when being updated.

To solve this you need to add the missing dependency as so:

image

The code will work but the lint rule wouldn't be happy to push "unnecessary" dependency as it claims!

The expected behavior

To show warning when this dependency is missing in such a reasonable case.

facebook/react

Answer questions vkurchatkin

why not extending the deps to consider other values

Because there is no good way to know, whether a value is "reactive" other than using conventions. Current conventions are (simplified):

  • A reactive value is a Component property, an argument of a hook or a local variable inside a hook or component;
  • A component is a function with capitalised name
  • A hook is a function that starts with use

mapState is neither a hook nor a component, hence context is not reactive.

useful!

Related questions

Disable react strict mode on third party libraries hot 6
Refs - "object is not extensible" hot 4
Warning: Unknown DOM property for. Did you mean htmlFor? hot 4
React@16.9 block `javascript:void(0);` hot 4
TypeError: Object(...) is not a function hot 3
Warning: validateDOMNesting(...): <tr> cannot appear as a child of <table> hot 3
React custom hook "Should have a queue. This is likely a bug in React" error message. hot 2
useEffect causes 'callback is not a function' exception hot 2
DevTools: Updating state or props in devtools does not trigger component update. hot 2
Infinite loop in useEffect using blank object or array hot 2
False-positive security precaution warning (`javascript:` URLs) hot 2
Hooks API - hook breaks when exported from module hot 2
Function components do not support contextType. hot 2
Feedback on useEffect depndencies change error hot 2
[ESLint] Feedback for 'exhaustive-deps' lint rule hot 2
Github User Rank List