React DevTools Profiler - Mide el rendimiento del renderizado y encuentra cuellos de botella

// Paso 1: Instala la extensión React DevTools del navegador
// Chrome: chrome://extensions -> busca "React Developer Tools"
// Firefox: Add-ons -> busca "React Developer Tools"
 
// Paso 2: Abre DevTools -> pestaña Profiler -> Haz clic en Record -> Interactúa -> Detén
 
// Paso 3: Usa la API React Profiler para medición en producción
import { Profiler, type ProfilerOnRenderCallback } from "react";
 
const onRender: ProfilerOnRenderCallback = (
  id,        // "Dashboard"
  phase,     // "mount" or "update"
  actualDuration,  // Tiempo dedicado al renderizado (ms)
  baseDuration,    // Tiempo estimado sin memoización (ms)
  startTime,
  commitTime
) => {
  if (actualDuration > 16) {
    // Más largo que un frame a 60fps
    console.warn(`Renderizado lento: ${id} tomó ${actualDuration.toFixed(1)}ms`);
  }
};
 
function App() {
  return (
    <Profiler id="Dashboard" onRender={onRender}>
      <Dashboard />
    </Profiler>
  );
}

// ---- Perfilando un dashboard lento y arreglando el cuello de botella ----
 
// ANTES: Dashboard se renderiza en ~180ms - Profiler muestra que OrderTable es el culpable
 
import { Profiler, useState, useMemo, memo, useCallback } from "react";
import type { ProfilerOnRenderCallback } from "react";
 
interface Order {
  id: string;
  customer: string;
  total: number;
  status: "pending" | "shipped" | "delivered";
  date: string;
}
 
// Logger de rendimiento - envía renderizados lentos a tu analítica
const perfLog: ProfilerOnRenderCallback = (id, phase, actualDuration, baseDuration) => {
  // Registra todos los renderizados durante el desarrollo
  console.table({
    component: id,
    phase,
    actual: `${actualDuration.toFixed(1)}ms`,
    base: `${baseDuration.toFixed(1)}ms`,
    saved: `${(baseDuration - actualDuration).toFixed(1)}ms`,
  });
 
  // En producción, solo reporta renderizados lentos
  if (process.env.NODE_ENV === "production" && actualDuration > 50) {
    fetch("/api/perf", {
      method: "POST",
      body: JSON.stringify({ id, phase, actualDuration, baseDuration }),
    });
  }
};
 
// Dashboard perfilado - envuelve cada sección independientemente
function Dashboard() {
  const [orders, setOrders] = useState<Order[]>(generateOrders(1000));
  const [statusFilter, setStatusFilter] = useState<string>("all");
  const [refreshCount, setRefreshCount] = useState(0);
 
  return (
    <div className="grid grid-cols-3 gap-4">
      <Profiler id="StatsPanel" onRender={perfLog}>
        <StatsPanel orders={orders} />
      </Profiler>
 
      <Profiler id="OrderTable" onRender={perfLog}>
        <OrderTable
          orders={orders}
          statusFilter={statusFilter}
          onFilterChange={setStatusFilter}
        />
      </Profiler>
 
      <Profiler id="ActivityFeed" onRender={perfLog}>
        <ActivityFeed refreshCount={refreshCount} />
      </Profiler>
 
      <button onClick={() => setRefreshCount((c) => c + 1)}>Actualizar</button>
    </div>
  );
}
 
// ANTES: StatsPanel - recomputa en cada renderizado (~12ms)
function StatsPanel({ orders }: { orders: Order[] }) {
  const revenue = orders.reduce((sum, o) => sum + o.total, 0);
  const pending = orders.filter((o) => o.status === "pending").length;
  const shipped = orders.filter((o) => o.status === "shipped").length;
 
  return (
    <div className="grid grid-cols-3 gap-2">
      <div>Ingresos: ${revenue.toLocaleString()}</div>
      <div>Pendiente: {pending}</div>
      <div>Enviado: {shipped}</div>
    </div>
  );
}
 
// DESPUÉS: StatsPanel - computación memoizada (~0.1ms en re-renderizado)
const OptimizedStatsPanel = memo(function StatsPanel({ orders }: { orders: Order[] }) {
  const stats = useMemo(() => ({
    revenue: orders.reduce((sum, o) => sum + o.total, 0),
    pending: orders.filter((o) => o.status === "pending").length,
    shipped: orders.filter((o) => o.status === "shipped").length,
  }), [orders]);
 
  return (
    <div className="grid grid-cols-3 gap-2">
      <div>Ingresos: ${stats.revenue.toLocaleString()}</div>
      <div>Pendiente: {stats.pending}</div>
      <div>Enviado: {stats.shipped}</div>
    </div>
  );
});
 
// ANTES: OrderTable - filtra y renderiza 1000 filas en cada renderizado padre (~160ms)
function OrderTable({
  orders,
  statusFilter,
  onFilterChange,
}: {
  orders: Order[];
  statusFilter: string;
  onFilterChange: (status: string) => void;
}) {
  const filtered = orders.filter(
    (o) => statusFilter === "all" || o.status === statusFilter
  );
 
  return (
    <table>
      <thead>
        <tr>
          <th>Cliente</th>
          <th>Total</th>
          <th>
            <select value={statusFilter} onChange={(e) => onFilterChange(e.target.value)}>
              <option value="all">Todos</option>
              <option value="pending">Pendiente</option>
              <option value="shipped">Enviado</option>
              <option value="delivered">Entregado</option>
            </select>
          </th>
        </tr>
      </thead>
      <tbody>
        {filtered.map((order) => (
          <tr key={order.id}>
            <td>{order.customer}</td>
            <td>${order.total}</td>
            <td>{order.status}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}
 
// DESPUÉS: OrderTable - filtrado memoizado y virtualizado (~3ms en re-renderizado)
const OptimizedOrderTable = memo(function OrderTable({
  orders,
  statusFilter,
  onFilterChange,
}: {
  orders: Order[];
  statusFilter: string;
  onFilterChange: (status: string) => void;
}) {
  const filtered = useMemo(
    () => orders.filter((o) => statusFilter === "all" || o.status === statusFilter),
    [orders, statusFilter]
  );
 
  // Muestra solo las primeras 50 filas + virtualiza el resto
  const visible = filtered.slice(0, 50);
 
  return (
    <table>
      <thead>
        <tr>
          <th>Cliente</th>
          <th>Total</th>
          <th>
            <select value={statusFilter} onChange={(e) => onFilterChange(e.target.value)}>
              <option value="all">Todos</option>
              <option value="pending">Pendiente</option>
              <option value="shipped">Enviado</option>
              <option value="delivered">Entregado</option>
            </select>
          </th>
        </tr>
      </thead>
      <tbody>
        {visible.map((order) => (
          <tr key={order.id}>
            <td>{order.customer}</td>
            <td>${order.total}</td>
            <td>{order.status}</td>
          </tr>
        ))}
      </tbody>
      <tfoot>
        <tr>
          <td colSpan={3}>
            Mostrando {visible.length} de {filtered.length} pedidos
          </td>
        </tr>
      </tfoot>
    </table>
  );
});

// npm install @welldone-software/why-did-you-render
 
// wdyr.ts - importa antes que React
import React from "react";
 
if (process.env.NODE_ENV === "development") {
  const whyDidYouRender = require("@welldone-software/why-did-you-render");
  whyDidYouRender(React, {
    trackAllPureComponents: true,
    logOnDifferentValues: true,
  });
}
 
// Marca componentes específicos para seguimiento
function ExpensiveList({ items }: { items: Item[] }) {
  return <ul>{items.map((item) => <li key={item.id}>{item.name}</li>)}</ul>;
}
ExpensiveList.whyDidYouRender = true;
 
// Salida de consola:
// ExpensiveList: Se re-renderizó por cambios en props:
//   items: [{id: 1}] !== [{id: 1}] (referencia diferente, contenido igual)

function useRenderPerfMark(componentName: string) {
  const renderCount = useRef(0);
 
  useEffect(() => {
    renderCount.current += 1;
    performance.mark(`${componentName}-render-${renderCount.current}`);
 
    if (renderCount.current > 1) {
      performance.measure(
        `${componentName}-render`,
        `${componentName}-render-${renderCount.current - 1}`,
        `${componentName}-render-${renderCount.current}`
      );
    }
  });
}
 
function Dashboard() {
  useRenderPerfMark("Dashboard");
  return <div>{/* ... */}</div>;
}
// Ver en Chrome DevTools -> pestaña Performance -> carril Timings