🔥
useEffect と useLayoutEffectの違い
Nextjs でスクロールアニメーションを制作した際に疑問に思ったので
初心者ながらざっくりまとめてみました。
間違っている箇所がありましたらご指摘いただけると嬉しいです。
useEffect と useLayoutEffect の違い
結論として useEffect と useLayoutEffect の書き方は同じですが、
コールバック関数が実行されるタイミングが違います。
useEffect
公式の説明では「副作用を実行するフック」となっております。
簡単に言うと関数の実行タイミングを React のレンダリング後まで遅らせるフックということです。
コンポーネントがレンダリングされて、新しい要素が画面に表示された後に実行されます。
useLayoutEffect
コンポーネントがレンダリングされて、新しい要素が画面に表示される前に実行されます。
デメリットとして useLayoutEffect はレンダリングをブロックします。
重い処理を書くとレンダリングが遅れる。
まとめ
実行されるタイミングが画面描写される後か前かの違いです。
useEffect が画面描写後で
useLayout が画面描写前ということです。
可能な場合は画面の更新がブロックするのを避けるため、
標準の useEffect を優先して使ってください。
と公式で書いてあるように基本的には useEffect を用いた方が良さそうです。
固定アニメーションなどを使う時に上手く動作しなかった際は useLayoutEffect を
実装してもいいかもですね。
Discussion