Skip to content

eslint-plugin-react-hooks: 'Hook is being called conditionally' error outside condition #16832

@cbdeveloper

Description

@cbdeveloper

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

BUG (possibly)

What is the current behavior?

The plugin is showing this error:

React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return? (react-hooks/rules-of-hooks)eslint

But I don't think I'm calling any hooks conditionally.

The code:

https://codesandbox.io/s/exciting-bhabha-mqj7q

function App(props) {
  const someObject = { propA: true, propB: false };

  for (const propName in someObject) {
    if (propName === true) {
      console.log("something");
    } else {
      console.log("whatever");
    }
  }

  // THE PLUGIN ERROR MSG ON THIS useState
  const [myState, setMyState] = useState(null);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

image

What is the expected behavior?

The plugin wouldn't show the error in this situation.

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

image

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions