title: Strange behavior of React hooks: delayed data update
body: <p>Strange behavior: I expect that the first and the second console.log display a different result, but they display the same result and the value is changed only on the next click. How should I edit my code so that the value will be different?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function App() {
    const [count, setCount] = React.useState(false);
    const test = () =&gt; {
      console.log(count); //false
      setCount(!count);
      console.log(count); //false
    };
    return (
      &lt;div className="App"&gt;
        &lt;h1 onClick={test}&gt;Hello StackOverflow&lt;/h1&gt;
      &lt;/div&gt;
    );
  }
  
  const rootElement = document.getElementById("root");
  ReactDOM.render(&lt;App /&gt;, rootElement);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"&gt;&lt;/script&gt;
  &lt;script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"&gt;&lt;/script&gt;
  &lt;div id="root"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>You can see a working example here:
  <a href="https://codesandbox.io/s/wz9y5lqyzk" rel="noreferrer">https://codesandbox.io/s/wz9y5lqyzk</a></p>