title: Why doesn't the React useState hook work in a for loop?
body: <p>I'm curious about why setting state in a for loop doesn't work as expected.</p>
  
  <p>This is my code using hooks.</p>
  
  <pre><code>const [count, setCount] = useState(0);
  
    const onButtonPress = () =&gt; {
      for(let i=0; i&lt;100; i++){
        setCount(i);
      }
    }
  
    useEffect(()=&gt; {
      console.log('useEffect called');
      console.log(count);
    },[count])
  </code></pre>
  
  <p>I call the <em>onButtonPress</em> function on a button click. </p>
  
  <p><strong>Behavior I expect</strong>: count state shoukd update 100 times and consequently call the useEffect hook a 100 times. </p>
  
  <p><strong>Actual behavior</strong>: The useEffect hook is being only called once after the last iteration of the loop.</p>
  
  <p>I know that the official react docs say that hooks shouldn't be used in loops but their explanation isn't very clear.</p>
  
  <p>I want to understand why calling setCount in a loop doesn't work.</p>
  
  <p><strong>NOTE</strong>: I know that there are other methods to achieve the desired result but I'm interested in understanding why the setCount wouldn't be called multiple times.  </p>