useEffect在Tooltip示例中后续悬停为何阻塞渲染？及useLayoutEffect机制疑问

问题背景 #

我在学习React官方文档里的useLayoutEffect钩子Tooltip示例，根据文档推测执行顺序是：
react render() --> reconciliation --> 虚拟DOM变化则更新DOM --> DOM更新完成 --> 执行useLayoutEffect --> 浏览器绘制并触发LayoutPaint事件 --> 触发useEffect。

为验证这个顺序，我把示例Tooltip.js里的useLayoutEffect替换成useEffect，还加了for循环延迟useEffect执行。首次加载后鼠标悬停按钮时，会先显示位置错误的Tooltip，1-2秒后useEffect执行完，Tooltip才修正到正确位置；但后续同一按钮再次悬停时，错误位置的Tooltip绘制会等useEffect完成后，才快速显示正确位置。

我有两个疑问：

1. 为何后续鼠标悬停时useEffect会变为渲染阻塞？
2. React如何确保useLayoutEffect阻止浏览器绘制，且当useLayoutEffect内存在状态更新时，触发新一轮render->重绘，同时完全避免之前的浏览器绘制（示例中Tooltip在-60px的位置从未被绘制）？

问题解答 #

1. 后续悬停时useEffect为何看似阻塞渲染？ #

这不是useEffect真的变成了渲染阻塞，而是React的渲染缓存与批量更新机制在起作用。
第一次悬停时，Tooltip是首次挂载，React会先完成DOM更新（把Tooltip放在初始错误位置），浏览器随即完成第一次绘制，之后才异步执行带延迟的useEffect。但后续悬停时，Tooltip是从隐藏状态切换为显示，React已缓存了该组件的DOM结构和状态计算逻辑。同时，React会将触发悬停的状态更新与useEffect内的状态更新合并为一次批量更新——也就是说，React会等待useEffect里的延迟代码执行完毕，把所有状态变更攒在一起，再一次性完成render、DOM更新和绘制步骤，所以你看不到中间错误位置的Tooltip。

2. useLayoutEffect如何阻止绘制并避免中间状态？ #

useLayoutEffect的核心特性是同步执行时机：它在DOM更新完成后、浏览器绘制之前同步触发。
当React完成DOM更新后，会立刻同步调用所有useLayoutEffect回调。如果回调内存在状态更新，React会立即启动新一轮的render、reconciliation、DOM更新流程——这整个过程都在浏览器绘制前完成。等所有useLayoutEffect及后续关联的更新都处理完毕，React才会允许浏览器进行绘制操作。因此，中间那些错误位置的DOM状态根本没有机会被浏览器渲染出来，用户自然看不到Tooltip处于-60px的位置。

内容的提问来源于stack exchange，提问作者user31782