facebook / react

The library for web and native user interfaces.
https://react.dev
MIT License
224.78k stars 45.84k forks source link

Bug: `react-hooks/rules-of-hooks` does not support `do/while` loops #28713

Open tyxla opened 3 months ago

tyxla commented 3 months ago

React version: 18.2.0

Steps To Reproduce

  1. Use a hook inside a do/while loop.

  2. You'll see that it's not considered a violation of the rule.

Code example:

function ComponentWithHookInsideDoWhile() {
    do {
        useHookInsideLoop();
    } while (true);
}

The current behavior

The react-hooks/rules-of-hooks does not consider hook usage inside a do/while loop a violation.

The expected behavior

I expected that I'd see the following ESLint error:

React Hook useHookInsideLoop() may be executed more than once. 
Possibly because it is called in a loop. 
React Hooks must be called in the exact same order in every component render.
tyxla commented 3 months ago

I've worked on fixing this in #28714

pranshu05 commented 2 months ago

Maybe instead of using do while loop you can do conditional rendering, create a state of condition and render the hook based on the condition.

In this method the hook won't be executed more than once!

tyxla commented 2 months ago

@pranshu05 this issue isn't about how to write conditional or loop hooks in React. This is about the ESLint rule that catches whether someone is using a hook potentially in a loop. There's no guaranteed way through static code analysis to catch if a loop will iterate more than once or not. Also, the rules of hooks ESLint rule already warns if someone is using a hook in a while, which can also have one, or even zero iterations. So it only makes sense that we do the same for do/while which will have 1 or more iterations.