Closed as not planned
Closed as not planned
Description
React version: N/A
Eslint-plugin-react-hooks version: 5.1.0
Steps To Reproduce
Link to code example:
const Dots = () => {
const count = 9;
const [highlightIndex, updateHighlightIndex] = React.useState(0);
React.useEffect(() => {
const updateHighlightIndexIntervalID = setInterval(() => {
updateHighlightIndex((i) => (i + 1) % count);
}, 200);
return () => {
clearInterval(updateHighlightIndexIntervalID);
};
}, []);
const dots: JSX.Element[] = [];
for (let i = 0; i < count; i++) {
dots.push(<span key={i} style={{opacity:i === highlightIndex ? 1 : 0.5}}>{i}</span>);
}
return <div>{dots}</div>;
};The current behavior
The linter reports the following error:
ESLint: React Hook "React. useState" 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.(react-hooks/ rules-of-hooks)
This is incorrect. The for loop is correctly reading a reactive variable. No hooks are called conditionally or inside a loop. The code can be rewritten to satisfy the linter but there is nothing wrong with the original code.
The expected behavior
No error is reported. Having a for loop reading a reactive variable should not report an error.