profile
viewpoint

Ask questions[eslint-plugin-react-hooks] Bug: exhaustive-deps not working with function declaration

<!-- Please provide a clear and concise description of what the bug is. Include screenshots if needed. Please test using the latest version of the relevant React packages to make sure your issue has not already been fixed. -->

When extracting a useEffect callback from inline to a funcion declaration, the exhaustive-deps rule stops showing warnings related to the referenced function

React version: 16.12.0 eslint-plugin-react-hooks version: 1.7.0

Steps To Reproduce

  1. Add a basic useEffect code which doesn't declare one of the dependencies in the array (tmp)
  const [tmp, setTmp] = useState("");

  useEffect(() => {
    console.log(tmp);
  }, []);
  1. ESLint shows the exhaustive-deps warning
  2. Extract the useEffect callback to a function declaration
  const [tmp, setTmp] = useState("");

  function sideEffect() {
    console.log(tmp);
  }

  useEffect(sideEffect, []);

<!-- Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Issues without reproduction steps or code examples may be immediately closed as not actionable. -->

Link to code example: https://codesandbox.io/s/summer-sunset-oie9s

<!-- Please provide a CodeSandbox (https://codesandbox.io/s/new), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem. You may provide a screenshot of the application if you think it is relevant to your bug report. Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve. -->

The current behavior

ESLint plugin does not show the exhaustive-deps warning

The expected behavior

ESLint plugin should work even if the useEffect callback isn't inline

facebook/react

Answer questions vkurchatkin

Never do this. There is no good reason to do this, but it is very hard to make exhaustive-deps support this pattern

useful!

Related questions

Disable react strict mode on third party libraries hot 6
Refs - &#34;object is not extensible&#34; 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