useInsertionEffect

公式ドキュメント ↗

useInsertionEffect(() => {
  const style = document.createElement("style");
  style.textContent = `.generated-${id} { color: ${color}; }`;
  document.head.appendChild(style);
  return () => style.remove();
}, [id, color]);

実行の順番を比べる: useInsertionEffect→useLayoutEffect→useEffect

useInsertionEffect(() => { ... }, [deps]); // 最速。DOM変更の直後
useLayoutEffect(() => { ... }, [deps]);    // 画面が描かれる前
useEffect(() => { ... }, [deps]);          // 画面が描かれた後

useInsertionEffectは、DOMが更新された直後・useLayoutEffectより前に実行される、一番早いタイミングのeffect。CSS-in-JSライブラリは、レイアウト計算が走る前にスタイルを確定させたい。useLayoutEffectでスタイルを差し込むと、他のコンポーネントのuseLayoutEffectとレイアウト計算が交互に走って非効率になることがあるため、それより前に実行されるこのフックが使われる。

普段のアプリ開発ではまず使わない

このフックの出番は、ほぼCSS-in-JSライブラリの内部実装に限られる。Reactの公式ドキュメントでも「ライブラリ作者向け」と明記されている。普段の開発では、このフックの存在と、他のeffect系フックより早いタイミングで動くということだけ知っておけば十分。