useEffect vs useLayoutEffect

https://blog.logrocket.com/useeffect-vs-uselayouteffect/
https://daveceddia.com/useeffect-vs-uselayouteffect/

useEffect 保证在浏览器paint之后，再被调用

Only after the browser has painted the DOM change(s) is the useEffect function fired.

useEffect runs asynchronously and after a render is painted to the screen.

1. You cause a render somehow (change state, or the parent re-renders)
2. React renders your component (calls it)
3. The screen is visually updated
4. THEN useEffect runs

并且是一个async

useLayoutEffect
在dom的mutation发生之后，同步调用useLayoutEffect，然后再交给浏览器做paint， 所以会看到一个延时，如果是做了大量的计算的话