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.

Bắt đầu với ví dụ tooltip useLayoutEffect được liên kết trong issue và kiểm tra Tooltip.js CodeSandbox đã được sửa đổi. Tái hiện hành vi của mouseover đầu tiên và các mouseover sau đó bằng useEffect bị làm chậm, rồi tham khảo tài liệu liên quan và hành vi lập lịch của trình duyệt. Công việc được xem là hoàn tất khi hai câu hỏi của issue có lời giải thích rõ ràng và được ghi lại.