ぶうううん's Cafe

どうにかこうにか。備忘録に近い。

React useInsertionEffectについて

React

useInsertionEffectの用途

 React Docsに以下の記述[1]がある通り、このHookはCSS in JS ライブラリの開発で用いるもの。DOM変更前に発火する。

useInsertionEffect is aimed at CSS-in-JS library authors. Unless you are working on a CSS-in-JS library and need a place to inject the styles, you probably want useEffect or useLayoutEffect instead.

useInsertionEffectを用いるメリット

 ランタイムでのstyleタグ挿入は以下の問題がある。useInsertionEffectを用いることで、後者の問題を解消することができる。

  • ブラウザによって頻繁にスタイルの再計算が行われる。

  • Reactのライフサイクルにおいて、間違ったタイミングで発火すると非常に動作が遅くなる。

所感

 Reactのライフサイクルにおいて、間違ったタイミングで発火すると非常に動作が遅くなる。[1] これは実際に体感することがあったので、個人的にこうしたReactでのスタイル関連hookは今まで調べたことがなく興味深かった。このhookは基本的にCSS in JS ライブラリ内でしか使うことが無いが、本当に小さいCSS in JS ライブラリは意外と手軽に開発できそうだと感じた。CSS in JS ライブラリ開発についてもう少し調べてみたい。

References