This is the reason why "2" was printed before 3 4 after click event.
<a href="https://react.dev/reference/react/useEffect#caveats">https://react.dev/reference/react/useEffect#caveats</a>
<blockquote>
If your Effect is caused by an interaction (like a click), React may run your Effect before the browser paints the updated screen. This ensures that the result of the Effect can be observed by the event system. Usually, this works as expected. However, if you must defer the work until after paint, such as an alert(), you can use setTimeout. See reactwg/react-18/128 for more information.
</blockquote>
<pre><code>1
3
4
2
5
6
1
2
3
4
</code></pre>

Detail explain

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