[react-hooks/exhaustive-deps] eslint --fix breaks the code

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

I want to report a bug

What is the current behavior?

eslint --fix trying to break my hook)

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn’t have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

I have a very simple hook:

import { useEffect, useState } from 'react'

export function useSwitchTab(trigger, tabsAmount, initialState = 0) {
  const [currentTab, setTab] = useState(initialState - 1)

  useEffect(() => {
    setTab(currentTab + 1 >= tabsAmount ? 0 : currentTab + 1)
  }, [tabsAmount, trigger])

  return [currentTab, setTab]
}

If props tabsAmount or trigger will change, I need to increase currentTab value by 1. It works fine and looks ok for me, but in eslint-plugin-react-hook rule react-hooks/exhaustive-deps will warn here:

React Hook useEffect has a missing dependency: ‘currentTab’. Either include it or remove the dependency array. You can also do a functional update ‘setTab(c => …)’ if you only need ‘c urrentTab’ in the ‘setTab’ call react-hooks/exhaustive-deps

And eslint --fix will break my code like this:

import { useEffect, useState } from 'react'

export function useSwitchTab(trigger, tabsAmount, initialState = 0) {
  const [currentTab, setTab] = useState(initialState - 1)

  useEffect(() => {
    setTab(currentTab + 1 >= tabsAmount ? 0 : currentTab + 1)
  }, [currentTab, tabsAmount, trigger])

  return [currentTab, setTab]
}

It will add currentTab in deps for useEffect and this will create endless loop.

What is the expected behavior?

Eslint shouldn’t fix this warning with --fix option, It may break the code.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

react: 16.8.5 eslint-plugin-react-hooks: 1.6.0

[EugeneDraitsev]

@infodusha I understand how eslint-disable works. Problem is in semantic of eslint --fix.

Just imagine situation I have my version of code - it works fine, I pushed my changes to remote. CI executes ‘eslint --fix’ and deploy broken version of code to production (just because this is autofixable warning)

Eslint --fix should never change logic of your code. But in my example eslint with this rule will change logic of my code. I pretty sure that this warning should be not-autofixable with --fix.

[infodusha]

@EugeneDraitsev // eslint-disable-line react-hooks/exhaustive-deps will help eslint --fix ignore this rule on line