React Academy · Aula

Uso da aba Profiler

Registre renderizações, leia gráficos de chama e identifique componentes lentos.

Uso da aba Profiler é uma aula grátis de React Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 4 aulas no total.

Boas-vindas

Nesta lição, você usará o Perfilador do React DevTools para registrar renderizações, ler gráficos de chamas e identificar quais componentes estão causando gargalos de desempenho.

Abrindo o Perfilador

Clique na guia **Perfilador** no React DevTools (ao lado de Componentes). Você verá um botão Gravar (círculo) e um botão Recarregar e criar perfil. O perfilador funciona apenas no modo de desenvolvimento.

Registrando uma sessão

Clique em **Gravar** (o círculo), interaja com seu aplicativo (por exemplo, clique em um botão ou digite em uma entrada) e depois clique em **Parar** (o quadrado). O DevTools captura cada renderização ocorrida durante a sessão.

Lendo o gráfico de chamas

O gráfico de chamas mostra uma barra por componente em cada confirmação. Largura = tempo gasto na renderização. Pilhas altas = árvores de componentes profundas. Passe o cursor sobre uma barra para ver o nome do componente e a duração exata da renderização.

Linha do tempo das confirmações

Na parte superior do Perfilador, você verá uma fileira de barras pequenas — uma para cada confirmação do React. Barras mais altas representam confirmações mais lentas. Clique em uma barra para acessar o gráfico de chamas dessa confirmação.

Por que um componente foi renderizado?

Selecione um componente no gráfico de chamas e consulte a seção **Por que isso foi renderizado?**. Ela mostra se o componente foi renderizado porque as propriedades mudaram, o estado mudou ou um componente pai foi renderizado novamente.

Barras cinzentas e coloridas

As barras cinzentas significam que o componente **não** foi renderizado nesta atualização (React reutilizou a saída anterior). As barras coloridas significam que ele foi renderizado novamente — cores mais escuras indicam tempos de renderização maiores.

A visualização do gráfico classificado

Mude do gráfico de chamas para o gráfico **Classificado** (use o controle no topo). Ele lista todos os componentes renderizados, ordenados pelo tempo de renderização, facilitando a identificação imediata do componente mais lento.

Registrar e recarregar

Clique em **Recarregar e criar perfil** em vez de Registrar para capturar o carregamento da página, incluindo as renderizações iniciais. Isso ajuda a encontrar componentes lentos na primeira montagem.

Ativando a criação de perfis em produção

As compilações de produção desativam o perfilador por padrão. Para criar um perfil de produção, compile usando `react-dom/profiling` como um alias e `scheduler/tracing-profiling`. A maioria das equipes cria perfis primeiro em desenvolvimento.

Verificação rápida

No gráfico de chamas do perfilador do React DevTools, o que representa a largura de uma barra?

Recapitulação

Agora você pode registrar uma sessão do perfilador, ler gráficos de chamas e gráficos classificados, verificar por que um componente foi renderizado novamente e usar a linha do tempo das atualizações para navegar entre as renderizações.

Próxima lição

Próxima lição: **Depurando erros comuns do React** — você diagnosticará avisos de chaves ausentes, erros de estado indefinido e incompatibilidades de hidratação usando o DevTools e o console do navegador.

Perguntas Frequentes

A aula “Uso da aba Profiler” é grátis?

Sim — o texto completo de “Uso da aba Profiler” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 4 aulas no total.

O que vou aprender em “Uso da aba Profiler”?

Registre renderizações, leia gráficos de chama e identifique componentes lentos. Você pratica React Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar React Academy?

Nenhuma experiência prévia é necessária. React Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Uso da aba Profiler”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de React Academy?

Sim. Cada aula de React Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

Instalação e abertura do React DevTools
Inspeção de árvores de componentes e props
Uso da aba Profiler
Depuração de erros comuns do React

← Voltar para React Academy