Trigger sequence in a component rendering:
<blockquote>
<ol>
<li>synchronous code directly in component (log(1))</li>
<li>asynchronous code in useEffect callback (log(2))</li>
<li>micro task (log(3) in promise then)</li>
<li>macro task (log(4) in timeout callback)
result: <code>1 -&gt; 2 -&gt; 3 -&gt; 4</code></li>
</ol>
</blockquote>
Trigger sequence in the button click event listener:
<blockquote>
<ol>
<li>synchronous code (log(5) and log(6))</li>
<li>setState updates state</li>
<li>component rerendering caused by the state update, same order with the previous component rendering
result <code>5 -&gt; 6 -&gt; 1 -&gt; 2 -&gt; 3 -&gt; 4</code></li>
</ol>
</blockquote>
<blockquote>
Answer <code>1 -&gt; 2 -&gt; 3 -&gt; 4 -&gt; 5 -&gt; 6 -&gt; 1 -&gt; 2 -&gt; 3 -&gt; 4</code>
</blockquote>

Explanation

What does the code snippet to the right output by console.log?…