DevTools

React Profiler

Ferramenta no React DevTools que mostra quais componentes renderizaram, por quê e quanto custou.

Definição

React Profiler é uma aba do React DevTools que grava sessões de renderização e mostra: quais componentes renderizaram, em que fase (mount/update), tempo gasto, e o motivo (props, state, context). Existe também a API Profiler para uso programático.

Problema → Solução

Problema

console.log e Lighthouse não mostram qual componente React específico está causando lentidão.

Solução

React Profiler → flamegraph com timing por componente + 'Why did this render?' para diagnóstico exato.

Dica de entrevista

Tip

Sempre faça profiling em modo Produção (build). O modo Desenvolvimento é propositalmente mais lento.

Código

import { Profiler } from 'react';

<Profiler id="App" onRender={(id, phase, actualDuration) => {
  if (actualDuration > 16) {
    console.warn(`Lento: ${id} ${actualDuration}ms`);
  }
}}>
  <Dashboard />
</Profiler>

Perguntas de entrevista

Q.O que significa actualDuration vs baseDuration?▾

A.actualDuration é o tempo real do render (com memoização). baseDuration é o tempo SEM memoização (re-renderizando tudo). A diferença mostra quanto a memoização está economizando.

Q.Como medir performance em produção real?▾

A.Use Web Vitals (LCP, INP, CLS) via web-vitals lib enviando para analytics. Profiler é para development. Em produção, Real User Monitoring (RUM) é o caminho.

Q.Profiler pode rodar em produção?▾

A.Build de produção remove a Profiler API por padrão. Para habilitar, use o build especial com profiling enabled (React docs explicam). Não recomendado em produção real.

15/122← →