facebook
Bug: `react-hooks/rules-of-hooks` does not support `do/while` loops
React version: 18.2.0
Steps To Reproduce
-
Use a hook inside a
do/whileloop. -
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.
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!
@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.