title: Is it posible to sync latest state in function
body: <p>Here is the Code .   </p>
  
  <p>When I click the "Test" button, it will trigger <code>SetText</code> to update the number.<br>
  And then I click the "Stop" button. I hope it will display <code>console.log("STOP")</code>.<br>
  But it seems like I can't get the latest <code>isStop</code> value in the <code>for...of</code> loop when <code>isStop</code> change.   </p>
  
  <pre><code>import React, { useState } from "react";
  
  export default function App() {
    const [isStop, SetIsStop] = useState(false);
    const [text, SetText] = useState(false);
    function delay() {
      return new Promise(function(resolve, reject) {
        setTimeout(function() {
          resolve();
        }, 1000);
      });
    }
    return (
      &lt;div className="App"&gt;
        &lt;button
          onClick={async () =&gt; {
            for (let item of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]) {
              if (isStop) {
                console.log("STOP");
              } else {
                SetText(item);
                console.log(isStop);
                await delay();
              }
            }
          }}
        &gt;
          Test
        &lt;/button&gt;
        &lt;button onClick={() =&gt; SetIsStop(true)}&gt;Stop&lt;/button&gt;
        &lt;div&gt;{text}&lt;/div&gt;
        &lt;div&gt;isStop: {isStop ? "STOP" : "NOT STOP"}&lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  </code></pre>
  
  <p>Is it posible to sync latest state in function ?</p>