useEffect(() => {
  // do side effects
  return () => /* cleanup */
}, [...dependencies])

useLayoutEffect(() => {
  // do side effects
  return () => /* cleanup */
}, [...dependencies])

兩者使用起來看上去沒什麼差別，到底什麼時候該使用 useEffect 什麼時候該使用 useLayoutEffect ?

useEffect：渲染更新畫面之後，採用異步的方式執行，實際步驟如下

1. 觸發 re-render
2. render Component
3. 畫面更新
4. 執行 useEffect

useLayoutEffect：在渲染觸發後，採用同步的方式執行，當 useLayoutEffect 執行完成之後，才會更新畫面。

1. 觸發 re-render
2. render Component
3. 等待 useLayoutEffect 執行完成
4. 畫面更新

大多數情況下建議使用 useEffect，因為 useLayoutEffect 是採用同步的方式更新畫面，會降低效能，只有當畫面因為執行 useEffect 而發生閃爍的時候才選擇使用 useLayoutEffect。

參考資料

React: "mount" vs "render"?
useEffect vs useLayoutEffect
When to useLayoutEffect Instead of useEffect (example)
What is the real difference between React useEffect and useLayoutEffect?