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

The expected behavior

Hook should not be conditional