React useInsertionEffect — CSS-in-JSスタイル注入
CSS-in-JSライブラリ作者のためのuseInsertionEffectを理解します。実行タイミング、存在理由、useLayoutEffectとの比較、スタイルタグ注入の実例を網羅。
Effect Hooks
詳細な説明
useInsertionEffectによるスタイル注入
useInsertionEffectはCSS-in-JSライブラリ作者向けに設計された特殊なHookです。DOM変更前かつuseLayoutEffectの前に実行され、レイアウトエフェクトがDOMを読み取る際にスタイルが利用可能であることを保証します。
実行順序
useInsertionEffect -> DOM変更 -> useLayoutEffect -> ペイント -> useEffect
存在理由
CSS-in-JSライブラリ（styled-components、Emotion、Stylex）はドキュメントに<style>タグを注入する必要があります。useInsertionEffect以前は、useLayoutEffectを使用していましたが、DOM変更後に実行されるため、スタイルなしでDOMノードが存在する短い期間がありました。
制限
- useInsertionEffect内で状態を更新できない
- Refはまだアタッチされていない
- DOMノードの読み取りや操作はできない
- このHookはライブラリ作者向けであり、アプリケーションコードではない
ユースケース
CSS-in-JSライブラリ作者がDOM変更前にスタイルタグを注入し、useLayoutEffectが測定を実行する際にスタイルが利用可能であることを保証するために使用します。アプリケーション開発者はこのHookを直接必要としないはずです。