這篇要補充一個比較少使用到的 useLayoutEffect hook，和 useEffect 語法相同，也都用於處理副作用，但它們的執行時機不太一樣。

和 useEffect 差異

先假設畫面上有一個 toggle 按鈕，已經綁定對應的事件和 state，那當它被點擊的瞬間，DOM 經過了以下四個步驟做改變:

1. state 狀態更新，引起畫面變化
2. 建構新的 virtual dom tree
3. 和舊的 virtual dom tree 比較，透過 diff 演算法找出需要更新的部分
4. 將更新的部分更新到 real dom

在第四步驟結束時 useEffect 才開始執行放在它裡面的函式，但 useLayoutEffect 不同，它在第三步驟就會開始執行，也就是重繪 (repaint) DOM 前，而由於 useLayoutEffect 是同步的，等 useLayoutEffect 內的程式碼執行完，才會進行後面的任務，所以它會有拖延到畫面呈現的問題。

useLayoutEffect runs synchronously after the render phase but before the DOM is painted.

使用時機

這裡舉個範例，在操作 DOM 時，有發現到有閃爍情況時使用。

在以下範例中，點擊按鈕後會跳出一段文字，從圖片可以看出 useEffect 彈出文字有殘影，若從圖片不易看出讀者也可以點範例去做嘗試。
範例程式

useEffect:

useLayoutEffect:

註: 也許跳出文字在實際開發中有別的寫法，但這裡主要想表示它們的差別