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.

Inizia con l’esempio di tooltip useLayoutEffect collegato nell’issue ed esamina il Tooltip.js CodeSandbox modificato. Riproduci il comportamento del primo mouseover e di quelli successivi con il useEffect rallentato, quindi consulta la documentazione circostante e il comportamento di scheduling del browser. Il lavoro è completato quando le due domande dell’issue hanno una spiegazione chiara e documentata.