ReactにおけるuseEffectフックのバリエーション

useEffectフックには、特殊で非常に稀にしか使用されない他のバリエーションもあります。 そのため、これらについては簡潔に触れることにします。

最初のバリエーションは、ブラウザが画面を再描画する前に発火するuseLayoutEffectフックです。 この機能は、他の要素に基づいてコンポーネントのサイズと位置を計算し、 その後、ブラウザが描画時にそれを必要とされる場所にすぐに表示できるようにするために使用できます。 これにより、例えば、ユーザーは位置やサイズの変更時のコンポーネントの中間的なジャンプを見ることなく、 最終的なバージョンのみを見ることになります。

2つ目のバリエーションは、DOMツリーに何らかの変更が加わる前、 つまりrefがまだアタッチされておらず、DOMが更新されていない段階で発火するuseInsertionEffectフックです。 これは主に、DOM変更前にCSS-in-JSライブラリから動的なスタイルを挿入する必要がある場合に使用されます。