React useEffectとuseLayoutEffectの違いについて
ReactにはuseLayoutEffectというhookが存在します。
公式ドキュメントには以下のように書かれています。
この関数のシグネチャは
useEffectと同一ですが、DOM の変更があった後で同期的に副作用が呼び出されます。これは DOM からレイアウトを読み出して同期的に再描画を行う場合に使ってください。useLayoutEffectの内部でスケジュールされた更新はブラウザによって描画される前のタイミングで同期的に処理されます。可能な場合は画面の更新がブロックするのを避けるため、標準の
useEffectを優先して使ってください。
useEffectは、DOMの更新が完了した後に実行されます。
一方で、useLayoutEffectはDOMの更新前に実行され、useLayoutEffectの処理が完了するまでDOMの更新は行われません。
useLayoutEffectで時間がかかる処理を行っている場合、DOMの更新が遅れる可能性があることを示しています。
そのため、上記の公式ドキュメントのように、可能な場合はuseEffectを使用することが推奨されています。