js

/**
 *
 * ブラウザの1フレームの流れ：
 *
 *   1. JavaScript実行（通常タスク）
 *   2. Style / Layout / Render 準備
 *   3. requestAnimationFrame コールバック実行（Paint直前）
 *   4. Paint（実際の描画）
 *   5. setTimeout(..., 0) 実行（Paint後のmacrotask）
 */

requestAnimationFrame(() => {
  // Paint「直前」で呼ばれる
  console.log("① requestAnimationFrame：Paint直前に実行");

  // ここでDOM更新などを確定させる
  document.body.style.backgroundColor = "lightgreen";

  // Paint完了後（次のmacrotask）に実行される
  setTimeout(() => {
    console.log("✅ Paint完了後に実行される確実なタイミング");
  }, 0);
});

tsx

/* ReactなどでuseEffectなどによる「描画後の実行」がある場合、それを更に待つ必要がある */
requestAnimationFrame(() => {
  requestAnimationFrame(() => {
    setTimeout(() => {
      
    }, 0);
  });
});