今天要來介紹的是useLayoutEffect這個hook，這個hook和useEffect的使用方式很類似，差別在於useEffect是在畫面已經繪製上去，而useLayoutEffect是在畫面重新繪製以前，而且是個同步的行為，所以使用useLayoutEffect會拖慢瀏覽器繪製畫面的時間導致阻塞，如果可能的話盡量不要使用，使用useEffect可能是個比較好的選擇，但在某些情況下像是必須要拿到畫面的資訊，如元件大小位置的功能，避免畫面更新後才又變更位置或大小產生的閃爍問題就可以考慮使用。官網閃爍範例。

使用

useLayoutEffect(setup, dependencies?)

setup是放要執行的程式邏輯的function，會在元件加入，跟useEffect一樣在function裡面retun一個function是cleanup function，在dependence有改變時時會先執行帶有舊版資料的cleanup function再執行帶有更新資料的setup function，dependencies和其他hooks一樣，都是使用Object.is來比較舊資料與新資料，不同才會執行setup。官網範例。

是getSnapshotBeforeUpdate的hook版本?

並不是!

天真的我一開始看到這個hook，就想都是在畫面更新前執行那不就是**getSnapshotBeforeUpdate的hook版本，但是我忘記了一件事情，在useLayoutEffect 的setup function是拿不到舊的資料的。雖然和getSnapshotBeforeUpdate一樣都是在畫面更新前執行但是一個可以拿到舊的props和state一個無法，所以useLayoutEffect 並不是getSnapshotBeforeUpdate的一個替代品。

參考

https://react.dev/reference/react/useLayoutEffect