ReactHooksのuseEffectとuseLayoutEffectは、コンポーネント内で副作用を実行するために使用されることが多いフックです。

ではこれらの使い分けはどのようにしたらよいのか解説をしていきます。

実行タイミングとレンダリングの順序においていくつかの重要な違いがあります。

1. 実行タイミング

useEffect

useEffectは非同期で実行されます。

つまり、レンダリングの完了後に副作用を実行します。

これは、コンポーネントが描画された後に実行されるため、非同期の処理やネットワークリクエストなどの副作用に適しています。

useLayoutEffect

useLayoutEffectは同期的に実行されます。

つまり、レンダリングの完了後かつブラウザがDOMの変更を反映する前に副作用を実行します。

これにより、DOMの変更に対して直接的な制御が必要な場合に使用されます。

2. レンダリングの順序

useEffect

useEffect内の処理はブラウザが描画を完了し、ユーザーにコンテンツが表示された後に実行されます。

したがって、ユーザーインタラクションによる影響を受けず、レンダリングに関連する処理を遅延させることができます。

「ブラウザの描画→コンテンツ表示→useEffect実行」

useLayoutEffect

useLayoutEffect内の処理は、ブラウザがDOMの変更を反映する前に実行されます。

したがって、DOMの変更に対する同期的な処理や、DOMの要素の計算、計測、または変更が必要な場合に使用されます。

ただ、基本的にはuseEffectとシグネチャは同じと考えて問題はないです。

3. 注意点

useEffect

useEffectは非同期で実行されるため、他の非同期処理との順序が保証されません。

これは、ネットワークリクエストやタイマーなど、レンダリングの完了を待たずに実行される副作用に対して重要です。

useLayoutEffect

useLayoutEffectは同期的に実行されるため、パフォーマンスに影響を与える可能性があります。

また、公式ドキュメントによれば画面の更新がブロックする可能性を避けるためにuseEffectを優先するようにとの記載がありますので、基本的にはuseEffectを利用しておいて、都合が良くない場合に使うものと捉えると良いでしょう。

まとめ

一般的には、useEffectが多くのケースで適しており、非同期の副作用に使用されます。

なので、基本的にはuseEffectの使用で問題ありませんが、場合によってはuseLayoutEffectの方が良いパフォーマンスを発揮する場合がありますので、使い分けをうまく出来ると良さそうですね！

関連記事:

TS2305: Module ‘”react-router-dom”‘ has no exported member ‘RouteComponentProps’.が表示された時の解決方法 Reactで「Warning: Each child in a list should have a unique “key” prop.」が出た時の解決法 知っておくと良いJavaScript/TypeScriptで最後にセミコロン(;)をつける意味 useReducerとuseContextだけでReduxと同じ仕組みを作成する方法