Skip to content

Bug: eslint-plugin-react-hooks hides all errors on multiple findings #35394

@trapgar

Description

@trapgar

What kind of issue is this?

  • React Compiler core (the JS output is incorrect, or your app works incorrectly after optimization)
  • babel-plugin-react-compiler (build issue installing or using the Babel plugin)
  • eslint-plugin-react-hooks (build issue installing or using the eslint plugin)
  • react-compiler-healthcheck (build issue installing or using the healthcheck script)

React version: 19.2.0

Steps To Reproduce

  1. Add eslint-plugin-react-hooks to your project
  2. Open a tsx file
  3. Intentionally add a violation of the react-hooks/set-state-in-effect rule
  4. In the same file, intentionally add a violation of react-hooks/static-components rule
  5. Uncomment 1 of the 2 commented lines of code below

Link to code example:

export default function App() {
  const [foo, setFoo] = useState(false);

  useEffect(() => {
    setFoo(!foo);
  }, []);

  const ViolateStaticComponents = () => {
    // const [counter, setCounter] = useState(0);
    return (
      <h1>Hello, World!</h1>
    );
  };

  // const date = Intl.DateTimeFormat().format(new Date());

  return (
    <>
      <ViolateStaticComponents />
      ...
    </>
  );
}

The current behavior

If you uncomment the code on either line 9 or 15, the linter no longer picks up either set-state-in-effect or static-components rules.

The expected behavior

Both lint rule violations are correctly identified.


Not sure why the linter breaks on the 2nd useState reference, but I think it's breaking on the Intl.DateTimeFormat code because Intl isn't marked as a global.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Status: UnconfirmedA potential issue that we haven't yet confirmed as a bug

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions