CSS: Critical Path e Layout Thrashing

import { useState, useRef } from "react";

const ITEMS = Array.from({ length: 20 }, (_, i) => `Item ${i + 1}`);

export default function App() {
  const [mode, setMode] = useState("bad");
  const [log, setLog] = useState([]);
  const containerRef = useRef(null);

  function runBad() {
    const start = performance.now();
    const items = containerRef.current.querySelectorAll(".box");
    // ❌ Lê e escreve alternadamente — força o browser a recalcular layout em cada iteração
    items.forEach((el) => {
      const h = el.offsetHeight; // leitura (força layout)
      el.style.height = h + 1 + "px"; // escrita (invalida layout)
    });
    const end = performance.now();
    setLog((prev) => [
      `❌ Layout thrashing: ${(end - start).toFixed(2)}ms`,
      ...prev.slice(0, 4),
    ]);
  }

  function runGood() {
    const start = performance.now();
    const items = containerRef.current.querySelectorAll(".box");
    // ✅ Lê tudo primeiro (batch reads), depois escreve (batch writes)
    const heights = Array.from(items).map((el) => el.offsetHeight);
    items.forEach((el, i) => {
      el.style.height = heights[i] + 1 + "px";
    });
    const end = performance.now();
    setLog((prev) => [
      `✅ Batch read/write: ${(end - start).toFixed(2)}ms`,
      ...prev.slice(0, 4),
    ]);
  }

  return (
    <div style={{ fontFamily: "sans-serif", padding: 16 }}>
      <div style={{ display: "flex", gap: 8, marginBottom: 12 }}>
        <button
          onClick={runBad}
          style={{ padding: "6px 14px", background: "#f38ba8", border: "none", borderRadius: 6, cursor: "pointer" }}
        >
          ❌ Com Thrashing
        </button>
        <button
          onClick={runGood}
          style={{ padding: "6px 14px", background: "#a6e3a1", border: "none", borderRadius: 6, cursor: "pointer" }}
        >
          ✅ Sem Thrashing
        </button>
      </div>
      <div style={{ marginBottom: 12, minHeight: 80 }}>
        {log.map((l, i) => (
          <div key={i} style={{ color: "#cdd6f4", fontSize: 13, marginBottom: 2 }}>{l}</div>
        ))}
      </div>
      <div ref={containerRef} style={{ display: "flex", flexWrap: "wrap", gap: 4 }}>
        {ITEMS.map((item) => (
          <div
            key={item}
            className="box"
            style={{
              padding: "4px 8px",
              background: "#313244",
              borderRadius: 4,
              color: "#cdd6f4",
              fontSize: 12,
            }}
          >
            {item}
          </div>
        ))}
      </div>
    </div>
  );
}