title: React: For Loop is not detecting Hook's State changes
body: <p>Developing a React Aplication which primary functionality is to show each word of a sentence within a time interval previously set by the user (basically fast reading). I achieved this some days ago, but now im trying to implement a pause button (to pause the loop and get the actual word) and stuck.</p>
  <p>I decided to add a Pause button, that calls a function that sets the pause state to true, and inside my loop, in the case this pause state is 'true', it breaks out of the loop. But the problem is, that this loop doesnt detect the change, I have a console.log in line 18, that is always logging false, although I had already clicked the pause button and changed the state to 'false' (And that is working because im  also logging it in the useEffect and its loggin 'true')</p>
  <p>So, my question here is, how can I solve this? Am I using react hooks wrong?</p>
  <p>Code Sample:</p>
  <pre><code>const [time, setTime] = React.useState('500')
  const [pause, setPause] = React.useState(false)
  const go = async function(){
      let textarray = text.split(' ') //I split my text 
      for(let i = 0; i &lt; textarray.length; i++){ 
          console.log(pause) //This keeps logging false although the change in pauseButton function
          if(pause){
              //Get the actual word =&gt; i
              break;
          }
          else{
              setValue(textarray[i]) //Show the actual word
              await timeout(time) //Wait the time
          }
      }
  }
  const pauseButton = function(){
      setPause(true)
  }
  function timeout(ms) {
      return new Promise(resolve =&gt; setTimeout(resolve, ms));
  }
  </code></pre>