title: Why can't React Hooks be called inside loops or nested function?
body: <p><a href="https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level" rel="noreferrer">React Hooks documentation</a> says to <strong>not call Hooks inside loops, conditions, or nested functions.</strong></p>
  
  <p>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.</p>
  
  <p>But I don't see what is the problem if we call <code>useState</code> inside a loop where the number of iterations doen't change over the time. Here is an example :</p>
  
  <pre><code>const App = () =&gt; {
    const inputs = [];
  
    for(let i = 0; i &lt; 10; i++) {
      inputs[i] = useState('name' + i);
    }
  
    return inputs.map(([value, setValue], index) =&gt; (
      &lt;div key={index}&gt; 
        &lt;input value={value} onChange={e =&gt; setValue(e.target.value)} /&gt;
      &lt;/div&gt;
    ));
  }
  
  export default App;
  </code></pre>
  
  <p>Is there a problem with this code above ? And what is the problem of calling <code>useState</code> inside a nested function, if this function is called on every render ?</p>