🐛 useHookAtTopLevel doesn't flag hook usages after an early return

[arendjr]

Environment information

N/A, I used the playground.

What happened?

When a React component contains an early return, calls to hooks after that point are not correctly identified as being conditional.

For instance, see the following playground example: https://www.biomejs.dev/playground?lintRules=all&code=aQBtAHAAbwByAHQAIAB7ACAAdQBzAGUAUwB0AGEAdABlACAAfQAgAGYAcgBvAG0AIAAiAHIAZQBhAGMAdAAiADsACgAKAGYAdQBuAGMAdABpAG8AbgAgAE0AeQBDAG8AbQBwAG8AbgBlAG4AdAAoAHsAIABiAGEAcgAgAH0AKQAgAHsACgAgACAAaQBmACAAKAAhAGIAYQByACkAIAB7AAoAIAAgACAAIAByAGUAdAB1AHIAbgAgAG4AdQBsAGwAOwAKACAAIAB9AAoACgAgACAAYwBvAG4AcwB0ACAAWwBmAG8AbwAsACAAcwBlAHQARgBvAG8AXQAgAD0AIAB1AHMAZQBTAHQAYQB0AGUAKAAxACkAOwAKAAoAIAAgAHIAZQB0AHUAcgBuACAAPABkAGkAdgA%2BAHsAZgBvAG8AfQA8AC8AZABpAHYAPgA7AAoAfQA%3D

Expected result

The call to useState() should be flagged as conditional.

As a sidenote, I think it would be better if the useHookAtTopLevel rule were named noConditionalHookCalls instead, since that's its real purpose. As this example shows, being at the top-level isn't a guarantee something is not conditional.

Code of Conduct

• I agree to follow Biome's Code of Conduct

[ematipico]

Thank you @arendjr for reporting. We would also like a reproduction for the eslint hook rule, so we can confirm the incorrect behaviour

[arendjr]

I don’t know how to make an ESLint reproduction, but I can link you the source that confirms this should be flagged: https://legacy.reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level

Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function, before any early returns.

(emphasis mine)

[arendjr]

I saw how to make a reproduction in another issue, so you can use this link: https://stackblitz.com/edit/node-jfks6q?file=src%2Findex.js

❯ npm run lint

> [email protected] lint
> eslint src/**/*

/home/projects/node-jfks6q/src/index.js
  8:25  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

✖ 1 problem (1 error, 0 warnings)