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 中的两个问题都有清晰且有文档记录的解释。