ReactのuseEffectとuseLayoutEffectの違いと使い分け

// ツールチップの見た目と位置。高さが分かるまでは、ボタンの上に置く
function TooltipBox({ label, anchorTop, anchorBottom, height, boxRef, children }: BoxProps) {
  log(`${label}: 描画（高さ=${height ?? '未測定'}）`);
  slowDown(SLOW_MS);
  const gap = 8;
  let top = anchorTop - (height ?? 0) - gap;
  if (height !== null && top < 0) {
    // 上に入らないので、ボタンの下に置く
    top = anchorBottom + gap;
  }
  return (
    <div ref={boxRef} className="tooltip" data-measured={height !== null} style={{ top }}>
      {children}
    </div>
  );
}

// useEffect で高さを測る版
export function TooltipWithEffect(props: Props) {
  const ref = useRef<HTMLDivElement>(null);
  const [height, setHeight] = useState<number | null>(null);
  useEffect(() => {
    log('useEffect: 高さを測る');
    setHeight(ref.current!.getBoundingClientRect().height);
  }, []);
  return <TooltipBox label="useEffect" height={height} boxRef={ref} {...props} />;
}

// useLayoutEffect で高さを測る版
export function TooltipWithLayoutEffect(props: Props) {
  const ref = useRef<HTMLDivElement>(null);
  const [height, setHeight] = useState<number | null>(null);
  useLayoutEffect(() => {
    log('useLayoutEffect: 高さを測る');
    setHeight(ref.current!.getBoundingClientRect().height);
  }, []);
  return <TooltipBox label="useLayoutEffect" height={height} boxRef={ref} {...props} />;
}

// 毎フレーム、画面に描かれる直前のツールチップの状態を記録する
// （requestAnimationFrame のコールバックのあと、ブラウザはそのときの DOM を描く）
let last = '';
function watchFrames() {
  const states = (['effect', 'layout'] as Mode[]).map((m) => {
    const t = document.querySelector<HTMLElement>(`#card-${m} .tooltip`);
    if (!t) return `${m}=なし`;
    const where = t.dataset.measured === 'true' ? '測ったあとの位置' : '測る前の位置';
    return `${m}=${where}(top=${t.style.top})`;
  });
  const now = states.join(' / ');
  if (now !== last) log(`[フレーム] ${now}`);
  last = now;
  requestAnimationFrame(watchFrames);
}
requestAnimationFrame(watchFrames);

=== useEffect・タイマーで開いた場合
    4ms useEffect: 描画（高さ=未測定）
  205ms [フレーム] effect=測る前の位置(top=4px) / layout=なし
  206ms useEffect: 高さを測る
  207ms useEffect: 描画（高さ=36）
  407ms [フレーム] effect=測ったあとの位置(top=58px) / layout=なし
=== useEffect・クリックで開いた場合
   36ms useEffect: 描画（高さ=未測定）
  236ms useEffect: 高さを測る
  238ms [フレーム] effect=測る前の位置(top=4px) / layout=なし
  239ms useEffect: 描画（高さ=36）
  439ms [フレーム] effect=測ったあとの位置(top=58px) / layout=なし

=== useLayoutEffect・タイマーで開いた場合
    2ms useLayoutEffect: 描画（高さ=未測定）
  203ms useLayoutEffect: 高さを測る
  203ms useLayoutEffect: 描画（高さ=36）
  404ms [フレーム] effect=なし / layout=測ったあとの位置(top=58px)
=== useLayoutEffect・クリックで開いた場合
   42ms useLayoutEffect: 描画（高さ=未測定）
  242ms useLayoutEffect: 高さを測る
  243ms useLayoutEffect: 描画（高さ=36）
  443ms [フレーム] effect=なし / layout=測ったあとの位置(top=58px)