概要
useEffectとuseLayoutEffectの違いについて、混乱することが多かったのでまとめました。
まとめ
早速ですが、違いは以下の通りです。
実行タイミング
useEffectとuseLayoutEffectでは、実行タイミングが異なります。
useEffect
- タイミング: ブラウザの描画が完了した後に非同期的に実行されます
- 特徴: DOMの変更や、スタイルを動的に適用する場合、チラつきなどが発生する可能性がある
useLayoutEffect
- タイミング: ブラウザが描画を行う前に同期的に実行されます
- 特徴: 同期的に実行されるため、パフォーマンスに影響を与える可能性があるが、チラつきが発生しない
主な使用ケース
useEffect
- データfetch
- 外部ライブラリとの連携
useLayoutEffect
- DOMのサイズや位置の測定
- スクロール位置の制御
- 同期的なスタイル適用
まとめ
以上です。
Reactのライフサイクルは混乱しがちなので、頭の片隅に入れておきます。