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

The warning is correct: useAlert is a custom hook and context is an external value, so it is not a valid dependency

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