[React Hook 筆記] useLayoutEffect

React Hook 系列文

1. 從最基本的 Hook 開始 useState, useEffect
2. Memorized Hook- useMemo, useCallback
3. useRef
4. useContext
5. useReducer
6. useLayoutEffect
7. Custom Hooks

點 codePen 看原始碼

還是應使用 useEffect 為主，除非遇到閃爍問題才需嘗試用 useLayoutEffect替換，因為他是 synchronously 所以會有效能上的考量。

useLayoutEffect 使用頻率並不高，在 React 官方文件也只有短短幾行描述，但我研究了一下覺得相當有趣，決定用簡短 5 分鐘文章介紹一下。

When to use useLayoutEffect?

通常會在畫面有閃爍的 bug 時使用 ，像以下就是

Current Behavior

• (L) 每次都先出現 0 再 display random number 造成閃爍，使用者體驗不好
• (R) Message Body 位置會移動造成閃爍

Expected Behavior

• (L) 直接 display random number，不應該出現 0
• (R) 位置應該直接停在正確位置

從以上例子大概可以猜出造成此 bug 原因是 render 順序不對。變數會在一開始給預設值 (範例預設值都是 0)，若 DOM 已被 browser 畫出之後才開始從 0 計算就會產生飄移閃爍的 bug (0 → final number); 但若是先計算才畫出，畫面就會直接顯示想要的 (Only print final number)。