[ESLint]react-hooks/exhaustive-deps rule autofix modifies code function, violating eslint best practices

[Alphy11]

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
Consider:

function Example({ fetchData, someArg }) {
  let data = 'defaultValue';
  useEffect(() => {
    data = fetchData(someArg);
 }, [someArg]);

  return JSON.stringify(data);
}

auto fix will automatically change this to:

function Example({ fetchData, someArg }) {
  let data = 'defaultValue';
  useEffect(() => {
    data = fetchData(someArg);
 }, [someArg, fetchData]);

  return JSON.stringify(data);
}

Here we have a simple data fetch component that should refetch data when parameters change, but not when the fetch function changes. Whether this is right or not, it is legitimate code, that the lint fix will cause serious problems in the code if it is used like this:

function ExmapleUsage({ fetchData }) {
  return <Example fetchData={( arg ) => fetchData('Hello World', arg)} someArg="Goodbye" /> 
}

What is the expected behavior?

Eslint best practices say that fix rules should not change functionality of code, so that you can safely run fix and expect no functional changes to be made. This rule directly breaks that. I as a repo maintainer see the auto fix as a greater risk than the problems the lint rule prevents. If autofix was turned off, the rule would be entirely a positive.
Unfortunately, ESLint also has rejected the idea of disabling autofix for certain rules. So not following best practices is not ideal.
Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

Not a React Bug but a lint rule.

[gaearon]

Yep. We’re hoping eslint/rfcs#30 will let us resolve this in a nice way.

[devserkan]

I realized today that the linter does not warn about local functions anymore. Is it related to this issue? Is it possible that the warning is disabled right now?

[codepandy]

auto fix is really annoying.sometimes I didn't need the dependencies。
how to resolve it?

[gaearon]

sometimes I didn't need the dependencies。

This is usually a mistake and a misunderstanding.
Please read this:

• https://reactjs.org/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies
• https://reactjs.org/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often

As I said before, eslint/rfcs#30 will allow us to make autofix manual-only, but it's not ready yet.

[terrysahaidak]

@gaearon Hi Dan, here is something really similar in react-native world:

function App({ navigation }) {
  React.useEffect(() => {
    navigation.setParams({ myParam: 'test' });

    // it will add navigation here which will cause infinity loop
  }, []);

  return (
    ...
  )
}

Here is the link to the reproducing example.

[gaearon]

@terrysahaidak That can be fixed on the navigation library side since there's no way for React to tell whether a value is static or dynamic.

[gaearon]

There's movement on eslint/eslint#12384, which should let us solve this. Let's keep an eye on it.