Why is useEffect render-blocking(paint-blocking) in the tooltip example?

I am following the tooltip example for the useLayoutEffect hook from the new react docs. From their explanation, I assume that the following is the order of execution of things:

react render() --> reconciliation --> update DOM if virtual dom is changed --> DOM update finishes --> useLayoutEffect is executed --> broswer paints and triggers some sort of LayoutPaint event --> useEffect is triggered

To verify this, I swapped useLayouteffect hook with useEffect hook in the tooltip.js file of the docs example.

This is the modified example

I have put a few for loops to slow down the execution of useEffect hook. Now when you load the modifed example and move your mouse over to any of the three buttons, you will see first paint with tooltip in wrong position and then the useEffect takes 1-2s and then you will see another repaint with the tooltip at correct position. So far so good, but now any later mouseovers on the same button, you will see that the wrong-position-paint waits for useEffect to finish and then the correct-position-paint happens within a few miliseconds. So I have two questions:

1. Why does later mouseovers cause useEffect to become render-blocking?

2. How does react make sure that useLayoutEffect stops browser paint from happening and if any state update within useLayoutEffect is mentioned then triggers another render->repaint while completely disallowing the previous browser paint to occur at all. In our case the tooltip at -60px is not painted at all.

P.S: I asked this question originally on stackoverflow. I have some other questions on stackoverflow regarding the old documentation as well, which I will be soon migrating to github, as I think I have a better chance of getting answers by the core react devs here.

從 issue 中連結的 useLayoutEffect tooltip 範例開始，並檢查修改後的 Tooltip.js CodeSandbox。使用減慢的 useEffect 重現第一次和後續 mouseover 的行為，然後查閱相關文件以及瀏覽器的排程行為。完成的標準是對 issue 中的兩個問題都有清楚且有文件記錄的解釋。