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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions