Entrega & Rendering: CDN, Lazy Loading e Estratégias de Render

import { useState, useEffect, useRef } from "react";

function HeavyComponent() {
  return (
    <div style={{ padding: 24, background: "#1e1e2e", borderRadius: 8 }}>
      <h2 style={{ color: "#cba6f7" }}>Componente Carregado! 🎉</h2>
      <p style={{ color: "#cdd6f4" }}>
        Este componente só foi renderizado quando entrou na viewport.
        O IntersectionObserver evitou trabalho desnecessário antes disso.
      </p>
    </div>
  );
}

export default function App() {
  const [visible, setVisible] = useState(false);
  const [loaded, setLoaded] = useState(false);
  const ref = useRef(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setVisible(true);
          observer.disconnect();
        }
      },
      { threshold: 0.1 }
    );
    if (ref.current) observer.observe(ref.current);
    return () => observer.disconnect();
  }, []);

  useEffect(() => {
    if (visible) {
      setTimeout(() => setLoaded(true), 800);
    }
  }, [visible]);

  return (
    <div style={{ fontFamily: "sans-serif", padding: 16 }}>
      <p style={{ color: "#a6e3a1" }}>
        ✅ Componente acima do fold — renderizado imediatamente
      </p>
      <div
        ref={ref}
        style={{
          marginTop: 16,
          padding: 24,
          background: "#313244",
          borderRadius: 8,
          minHeight: 80,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        {!visible && (
          <p style={{ color: "#6c7086" }}>
            👆 Aguardando entrar na viewport...
          </p>
        )}
        {visible && !loaded && (
          <p style={{ color: "#fab387" }}>⏳ Carregando componente...</p>
        )}
        {loaded && <HeavyComponent />}
      </div>
    </div>
  );
}

import { useState, useRef, useMemo } from "react";

const ITEM_HEIGHT = 48;
const VISIBLE_COUNT = 8;

const allItems = Array.from({ length: 10000 }, (_, i) => ({
  id: i,
  label: `Item #${i + 1} — dado simulado`,
}));

export default function App() {
  const [scrollTop, setScrollTop] = useState(0);
  const containerRef = useRef(null);

  const startIndex = Math.floor(scrollTop / ITEM_HEIGHT);
  const endIndex = Math.min(startIndex + VISIBLE_COUNT + 1, allItems.length);

  const visibleItems = useMemo(
    () => allItems.slice(startIndex, endIndex),
    [startIndex, endIndex]
  );

  const totalHeight = allItems.length * ITEM_HEIGHT;

  return (
    <div style={{ fontFamily: "sans-serif", padding: 16 }}>
      <p style={{ color: "#a6e3a1", marginBottom: 8 }}>
        ✅ 10.000 itens — apenas {VISIBLE_COUNT + 1} renderizados no DOM
      </p>
      <div
        ref={containerRef}
        onScroll={(e) => setScrollTop(e.currentTarget.scrollTop)}
        style={{
          height: ITEM_HEIGHT * VISIBLE_COUNT,
          overflowY: "auto",
          position: "relative",
          background: "#1e1e2e",
          borderRadius: 8,
        }}
      >
        <div style={{ height: totalHeight, position: "relative" }}>
          {visibleItems.map((item) => (
            <div
              key={item.id}
              style={{
                position: "absolute",
                top: item.id * ITEM_HEIGHT,
                left: 0,
                right: 0,
                height: ITEM_HEIGHT,
                display: "flex",
                alignItems: "center",
                padding: "0 16px",
                borderBottom: "1px solid #313244",
                color: "#cdd6f4",
                fontSize: 14,
              }}
            >
              {item.label}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}