useLayoutEffectとuseEffectの実行タイミング

useLayoutEffectは、ReactがDOMの変更を適用した直後、ブラウザがその変更をペイントする前に、同期的に実行されます。ブラウザから見ると、レイアウトエフェクトとDOMの変更は、途切れることのない同じ同期処理ブロックの一部です。

useEffectは、ブラウザがペイントを完了した後に非同期で実行されます。ユーザーが更新されたUIを先に見て、その後でエフェクトが実行されます。そのためuseEffectはレンダリング性能への影響が小さくなりますが、エフェクトによって見た目に変化が生じる場合は、2回目のペイントサイクルが発生します。

両方のエフェクトでタイムスタンプをログ出力すれば、タイミングの違いを確認できます。useLayoutEffectにconsole.log('layout', Date.now())を追加し、useEffectにconsole.log('passive', Date.now())を追加してください。コンソールでは、レイアウトエフェクトのタイムスタンプが必ずパッシブエフェクトのタイムスタンプより早くなり、実行順序を確認できます。

useEffectが見た目に影響するstateを更新すると、ユーザーには2回のレンダーが見えます。最初は古いstateでレンダーされ、その後、エフェクトの実行後に修正されたレンダーが行われます。これは、目に見えるちらつきやレイアウトの再配置として現れます。useLayoutEffectなら、そのstate更新がブラウザのペイント前にコミットされるため、この問題を防げます。

useLayoutEffect内でsetStateを呼び出すと、Reactはペイント前にもう一度レンダーとコミットのサイクルを直ちに実行します。ブラウザがペイントするのは最終結果だけなので、ユーザーが中間状態を見ることはありません。これがuseLayoutEffectの主な用途です。DOMを測定し、新しい値を計算してstateを設定し、1回の整ったペイントを保証します。

useLayoutEffectはペイント前に同期的に実行され、追加のレンダーを引き起こす可能性があるため、多用すると性能が低下することがあります。同期処理が重い場合、ブラウザのペイントがブロックされ、目に見えるカクつきが発生します。視覚的なちらつきを防ぐ必要がある場合にだけ使用し、それ以外ではuseEffectを使用してください。

React Strict Mode（開発時のみ）では、useLayoutEffectとuseEffectの両方が、1回のマウントにつき2回呼び出されます。順序は、マウント、クリーンアップ、再度マウントです。これにより、適切にクリーンアップされないエフェクトを検出できます。本番ビルドでは二重呼び出しは発生しません。

デフォルトでは、常にuseEffectを選択してください。目に見えるちらつきや不正なレイアウトの問題を実際に確認して再現できる場合にだけ、useLayoutEffectへ切り替えます。useLayoutEffectを使いすぎると、ブラウザのペイントパイプラインを不必要にブロックし、体感性能を低下させる可能性があります。

useLayoutEffectはサーバー上では実行できません。サーバー環境にはDOMもブラウザのペイントサイクルも存在しないためです。サーバーでレンダーされるコンポーネントで使用すると、Reactは警告を出力します。対処方法は、エフェクトを条件付きでスキップすることです。typeof window !== 'undefined'を確認するか、SSR対応のコードではuseEffectに切り替えてください。

次のように自問してください。「このエフェクトは、最初のペイントでユーザーに見えるものを変更しますか？」答えが「はい」なら、ちらつきを防ぐためにuseLayoutEffectを使います。「いいえ」なら、データ取得、サブスクリプション、分析、ログ出力、その他ほとんどの副作用にはuseEffectを使います。この判断基準で、実際のユースケースの大半に対応できます。

useLayoutEffectはDOMの変更と同じ同期処理ブロック内で実行されます。useLayoutEffectの実行中、Reactはユーザーイベントへの応答など、他の処理を実行できません。そのため、処理は短く、目的を絞ったものにする必要があります。useLayoutEffect内で長時間実行される同期コードを書くと、ブラウザによる画面への描画が直接遅延します。

DOMの変更やブラウザのペイントに対して、useLayoutEffectは正確にはいつ実行されますか？

useLayoutEffectは同期的に実行され、ブラウザのペイント前に発火するため、DOMの測定や見た目の修正に適しています。useEffectはペイント後に発火し、データ取得、サブスクリプション、その他ほとんどの副作用に適しています。基本的にはuseEffectを使い、視覚的なちらつきによってuseLayoutEffectが必要だと確認できた場合にだけ切り替えてください。SSRではガードなしで使用しないでください。