title: Why react hook value is not updated in async function?
body: <p>When running the <strong>run</strong> function, I expect that <strong>value</strong> variable has value 'new', but since even 500 ms, it still remains 'old'. Why that happens and how coud this issue be solved?</p>
  
  <pre class="lang-js prettyprint-override"><code>import React, { Component, useState } from "react";
  import { render } from "react-dom";
  
  function App() {
    const [value, setValue] = useState('old');
  
    const run = async() =&gt; {
      setValue('new')
      const data = await wait(500)
      console.log(value)
    }
  
    return (
      &lt;button onClick={run}&gt;
        Run
      &lt;/button&gt;
    );
  }
  
  render(&lt;App /&gt;, document.getElementById("root"));
  
  function wait(ms) {
    return new Promise(resolve =&gt; setTimeout(resolve, ms))
  }
  </code></pre>