react: Bug: [eslint-plugin-react-hooks] - exhaustive-deps autofix not working after 2.4.0

From Amcsi comment in CRA:

They made it so react-hooks/exhaustive-deps does not autofix anymore by default.

To get autofixing to function add the following rule to your eslint

{
  ...
  "rules": {
    "react-hooks/exhaustive-deps": [
       "warn",
        {
          "enableDangerousAutofixThisMayCauseInfiniteLoops": true
        }
      ]
    }
  },

It works as well as it ever did!

This isn’t a mistake worse than typing while (true) {} and hitting save.

When we are working with hooks with deps, we write an empty deps array, hit save, check how our code works, and if it causes an infinite loop or something we disable the rule and manually manage the deps.

We have an app with 358 components (all using hooks) and we disabled the rule just 3 times. The autofix works almost all the time and when it doesn’t work it never causes anything catastrophic.

If people are autofixing on commit/push/etc. and debugging for hours, I’d say the problem lies with their DX. The errors should always appear on the IDE and autofixing should always happen on save and not magically with a commit hook or something.

I understand that this isn’t really an autofix since autofixes should not change functionality, but there’s no other way to do this as easy as turning on enableDangerousAutofixThisMayCauseInfiniteLoops and hitting save.

If we didn’t have enableDangerousAutofixThisMayCauseInfiniteLoops our DX with hooks would be significantly worse, so many many thanks for spending the time bringing this back and please keep supporting it until VSCode provides a way to apply the suggestion on save.

This is not a bug. We disabled the autofix because it created issues and wasn’t consistent with people’s expectations for ESLint autofix. Instead, we implemented the same functionality using the ESLint Suggestions API which was added in ESLint 6.7.0. You’ll need to wait for your IDE to support it: https://github.com/facebook/react/issues/18099#issuecomment-591647127

VS Code ESLint plugin already supports it.

@FrimJo Just in case if you didn’t find why it’s not working or for the benefit of others who will try it — there is a SPACE after option name "enableDangerousAutofixThisMayCauseInfiniteLoops "! If you remove it or remove quotes, everything will work.

@azz0r What exactly are you expecting to be updated? They started using code actions for this fix, if you want an old behavior, enable enableDangerousAutofixThisMayCauseInfiniteLoops option in eslint config.

I’m currently autofixinig my lint errors using

Again, you don’t want to “autofix” this rule on save. This is a mistake. It will lead to problems. This rule is meant to be applied manually, with careful consideration in each case.

(The concrete reason this option doesn’t work though is because we haven’t cut a release with it yet)

it saves me a lot of time compared to clicking the UI to fix the problem.

I think Cmd+. expands suggestions in VS Code so you don’t have to click. Regardless, this is a UI problem that VS Code can solve, e.g. by adding an easier way to iterate through a list of problems.

@melloc01 I’m facing exactly the same problem, I had to use eslint CLI to add them automatically.

Any update on this?

Hi @gaearon!

In your PR #18437 you write:

If you actually apply fix suggestions automatically, you don’t want to enable this.

and in your comment above you write that you are adding autofix back, which confuses me a bit.

I’m currently autofixinig my lint errors using

"editor.codeActionsOnSave": {
  "source.fixAll": true,
},

which works wonders for all my lint errors except react-hooks/exhaustive-deps.

I have "eslint-plugin-react-hooks": "^3.0.0" and latest version of vscode-eslint.

Now, if I want to have autofix for exhausive deps, should I add enableDangerousAutofixThisMayCauseInfiniteLoops? And how do I add it?

I’ve tried

"rules": {
  ...
  "react-hooks/exhaustive-deps": [1, { "enableDangerousAutofixThisMayCauseInfiniteLoops ": true }],
  ...
}

But ESLint just tells me

Configuration for rule "react-hooks/exhaustive-deps" is invalid: Value {"enableDangerousAutofixThisMayCauseInfiniteLoops":true} should NOT have additional properties.`

I’ve also tried

"rules": {
  ...
  "react-hooks/exhaustive-deps": [{ "enableDangerousAutofixThisMayCauseInfiniteLoops ": true }],
  ...
}

But get

Configuration for rule "react-hooks/exhaustive-deps" is invalid: 	Severity should be one of the following: 0 = off, 1 = warn, 2 = error (you passed '{ "enableDangerousAutofixThisMayCauseInfiniteLoops ": true }').

I’m adding autofix back behind an appropriately named option for people who really need it. Note: if your IDE or lint setup actually fixes it automatically, you do not want this. This is only for people who use older IDEs that don’t yet support Suggestions and who don’t run this as an automatic step.

https://github.com/facebook/react/pull/18437