Skip to content

Bug: [eslint-plugin-exhaustive-deps] hook wrongly marked as conditional (at exact number of conditionals in FC) #24279

Closed
@SanderRonde

Description

@SanderRonde

When using an exact number of conditionals before and after a react hook, the React Hook "hook_name" is called conditionally. React Hooks must be called in the exact same order in every component render rule is wrongly flagged as being violated. This is a really weird bug and it's kind of hard to explain. Just take a look at the code and watch as ESLint flags the hook as somehow being conditional. While this may seem like a huge edge case, this actually triggered in our code base and caused all hooks in the component to be flagged as conditional.

React version: 18.0.0 (doesn't seem to matter)

Steps To Reproduce

  1. Check out this project, run yarn and run yarn eslint app/foo.tsx.
  2. Watch as the hook is incorrectly flagged as conditional.
  3. Removing or adding one of the conditionals in the return statement makes the bug go away. The same goes for removing one of the conditionals above the hook.

Link to code example: https://github.com/SanderRonde/eslint-hook-bug
Unfortunately I couldn't get it to work online (because of a lack of terminals)

The current behavior

Hook is incorrectly flagged as conditional

image

The expected behavior

Hook should not be conditional

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