React Hooks documentation says to not call Hooks inside loops, conditions, or nested functions.
I understood that the order of execution was important so React can know which state corresponds to which useState call. Given that, it's obvious that a hook cannot be called inside a condition.
But I don't see what is the problem if we call useState
inside a loop where the number of iterations doen't change over the time. Here is an example :
const App = () => {
const inputs = [];
for(let i = 0; i < 10; i++) {
inputs[i] = useState('name' + i);
}
return inputs.map(([value, setValue], index) => (
<div key={index}>
<input value={value} onChange={e => setValue(e.target.value)} />
</div>
));
}
export default App;
Is there a problem with this code above ? And what is the problem of calling useState
inside a nested function, if this function is called on every render ?