它们两个的区别主要是执行时机的不一样，要理解执行时机。首先我们来了解下浏览器的执行流程，dom树和cssom树合并为render树之后，后面的流程概括来说就是layout布局，和paint（绘制，就把最后布局好的树画在屏幕视图上）。
这里直接揭晓答案，useLayoutEffect是在layout之后，paint之前执行的。而useLayoutEffect是paint之后执行的。
看官网还说过useLayoutEffect是同步执行的，useEffect是异步执行的。同步执行，意味着会阻塞浏览器重新绘制屏幕。
useLayout的使用场景:
1. 官网的例子是在浏览器重新绘制屏幕前计算布局，举了一个绘制tooltip的例子。同理，我们也可以想到，只要是与获取元素位置有关的功能的时候，都可以用到useLayoutEffect，但是要注意一点，计算量不能太大，要不会阻塞渲染，有延迟。
2. 如果有时候不想要页面闪烁那一下就是用useLayoutEffect。
参考：
【react】useEffect VS useLayoutEffectTLDR; useLayoutEffect 和 u - 掘金 (juejin.cn)
标签：useEffect,浏览器,区别,paint,执行,绘制,useLayoutEffect From： https://www.cnblogs.com/yaoyu7/p/18406860