🔥

useEffect と useLayoutEffectの違い

2023/03/14に公開

Nextjs でスクロールアニメーションを制作した際に疑問に思ったので
初心者ながらざっくりまとめてみました。
間違っている箇所がありましたらご指摘いただけると嬉しいです。

useEffect と useLayoutEffect の違い

結論として useEffect と useLayoutEffect の書き方は同じですが、
コールバック関数が実行されるタイミングが違います。

useEffect

公式の説明では「副作用を実行するフック」となっております。
簡単に言うと関数の実行タイミングを React のレンダリング後まで遅らせるフックということです。
コンポーネントがレンダリングされて、新しい要素が画面に表示された後に実行されます。

useLayoutEffect

コンポーネントがレンダリングされて、新しい要素が画面に表示される前に実行されます。
デメリットとして useLayoutEffect はレンダリングをブロックします。
重い処理を書くとレンダリングが遅れる。

まとめ

実行されるタイミングが画面描写される後か前かの違いです。
useEffect が画面描写後で
useLayout が画面描写前ということです。

可能な場合は画面の更新がブロックするのを避けるため、
標準の useEffect を優先して使ってください。

と公式で書いてあるように基本的には useEffect を用いた方が良さそうです。
固定アニメーションなどを使う時に上手く動作しなかった際は useLayoutEffect を
実装してもいいかもですね。

Discussion