React DevTools Profiler - Meça o desempenho de renderização e encontre gargalos

// Passo 1: Instale a extensão do navegador React DevTools
// Chrome: chrome://extensions -> procure por "React Developer Tools"
// Firefox: Add-ons -> procure por "React Developer Tools"
 
// Passo 2: Abra o DevTools -> aba Profiler -> Clique em Gravar -> Interaja -> Pare
 
// Passo 3: Use a API do React Profiler para medição em produção
import { Profiler, type ProfilerOnRenderCallback } from "react";
 
const onRender: ProfilerOnRenderCallback = (
  id,        // "Dashboard"
  phase,     // "mount" ou "update"
  actualDuration,  // Tempo gasto renderizando (ms)
  baseDuration,    // Tempo estimado sem memoização (ms)
  startTime,
  commitTime
) => {
  if (actualDuration > 16) {
    // Mais longo que um frame a 60fps
    console.warn(`Renderização lenta: ${id} levou ${actualDuration.toFixed(1)}ms`);
  }
};
 
function App() {
  return (
    <Profiler id="Dashboard" onRender={onRender}>
      <Dashboard />
    </Profiler>
  );
}

// ---- Profiling de um dashboard lento e correção do gargalo ----
 
// ANTES: Dashboard renderiza em ~180ms - Profiler mostra OrderTable como o culpado
 
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 desempenho - envia renderizações lentas para sua análise
const perfLog: ProfilerOnRenderCallback = (id, phase, actualDuration, baseDuration) => {
  // Registra todas as renderizações durante o desenvolvimento
  console.table({
    component: id,
    phase,
    actual: `${actualDuration.toFixed(1)}ms`,
    base: `${baseDuration.toFixed(1)}ms`,
    saved: `${(baseDuration - actualDuration).toFixed(1)}ms`,
  });
 
  // Em produção, reporte apenas renderizações lentas
  if (process.env.NODE_ENV === "production" && actualDuration > 50) {
    fetch("/api/perf", {
      method: "POST",
      body: JSON.stringify({ id, phase, actualDuration, baseDuration }),
    });
  }
};
 
// Dashboard com profiling - envolve cada seção independentemente
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)}>Refresh</button>
    </div>
  );
}
 
// ANTES: StatsPanel - recalcula a cada renderização (~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>Revenue: ${revenue.toLocaleString()}</div>
      <div>Pending: {pending}</div>
      <div>Shipped: {shipped}</div>
    </div>
  );
}
 
// DEPOIS: StatsPanel - cálculo memoizado (~0.1ms na re-renderização)
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>Revenue: ${stats.revenue.toLocaleString()}</div>
      <div>Pending: {stats.pending}</div>
      <div>Shipped: {stats.shipped}</div>
    </div>
  );
});
 
// ANTES: OrderTable - filtra + renderiza 1000 linhas a cada renderização pai (~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>Customer</th>
          <th>Total</th>
          <th>
            <select value={statusFilter} onChange={(e) => onFilterChange(e.target.value)}>
              <option value="all">All</option>
              <option value="pending">Pending</option>
              <option value="shipped">Shipped</option>
              <option value="delivered">Delivered</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>
  );
}
 
// DEPOIS: OrderTable - filtragem memoizada + virtualização (~3ms na re-renderização)
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]
  );
 
  // Mostra apenas as primeiras 50 linhas + virtualiza o restante
  const visible = filtered.slice(0, 50);
 
  return (
    <table>
      <thead>
        <tr>
          <th>Customer</th>
          <th>Total</th>
          <th>
            <select value={statusFilter} onChange={(e) => onFilterChange(e.target.value)}>
              <option value="all">All</option>
              <option value="pending">Pending</option>
              <option value="shipped">Shipped</option>
              <option value="delivered">Delivered</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}>
            Showing {visible.length} of {filtered.length} orders
          </td>
        </tr>
      </tfoot>
    </table>
  );
});

// npm install @welldone-software/why-did-you-render
 
// wdyr.ts - importe antes do 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,
  });
}
 
// Marque componentes específicos para rastreamento
function ExpensiveList({ items }: { items: Item[] }) {
  return <ul>{items.map((item) => <li key={item.id}>{item.name}</li>)}</ul>;
}
ExpensiveList.whyDidYouRender = true;
 
// Saída do console:
// ExpensiveList: Re-rendered because of props changes:
//   items: [{id: 1}] !== [{id: 1}] (referência diferente, mesmo conteúdo)

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>;
}
// Veja no Chrome DevTools -> aba Performance -> seção Timings