Otimizando a performance com React devtools

O React é uma biblioteca de Javascript para construção de código componentizável e reutilizável. À medida que a complexidade do código aumenta, pode ser desafiador debugar e encontrar pontos de gargalo na performance da sua aplicação. O React DevTools pode ser uma ferramenta poderosa para mitigar tais desafios.

O React DevTools é um conjunto de ferramentas que permite visualizar a árvore de componentes, suas props, os valores dos states e seus hooks. Da mesma forma, possibilita visualizar de forma simples e rápida o tempo de processamento de cada componente, facilitando a identificação de oportunidades de melhoria na performance da sua aplicação. Essas ferramentas dividem-se em duas abas: components e profiler. Neste artigo, vamos nos aprofundar nas funcionalidades do profiler.

A aba profiler é responsável por inspecionar o tempo para renderização dos componentes. O primeiro passo é gravar o processo de renderização da sua tela. Desta forma, é possível observar, a partir de gráficos de barras, o tempo desde o início da renderização até suas re-renderizações advindas de modificações no state do componente. O Profiler também pode ajudar a detectar padrões de renderização ineficientes, como re-renderizações excessivas devido a props ou estados mal gerenciados.

A aba profiler possui três sub-abas: flamegraph, ranked e timeline. O flamegraph nos apresenta um gráfico cujos comprimentos de cada barra representam o tempo de renderização de cada componente, ordenados pela hierarquia deles.

A sub-aba ranked também nos apresenta uma representação visual do tempo de renderização de cada componente, mas ranqueando as barras em ordem decrescente de tempo de espera. Desta forma, esta sub-aba nos oferece uma visão mais “direto ao ponto” para busca de componentes que possam estar causando lentidão na aplicação.

Por último, a sub-aba timeline representa uma linha do tempo da renderização de cada componente. Comparado às abas supracitadas, esta é a que possui menos utilidade para o nosso propósito.

No Flamegraph, podemos ver, entre parênteses, dois valores em milissegundos sendo mostrados. Os números indicam o tempo total para o componente ser renderizado: o primeiro indica o tempo para renderizar o componente, enquanto o último indica o tempo total, incluindo a renderização dos componentes filhos. Este dado é importante para visualizarmos qual componente está sendo o seu gargalo, o componente em si ou algum de seus filhos.

Em qualquer uma das abas que mostra os componentes, é possível ver o tempo de cada renderização e o porquê de sua renderização, seja a modificação de uma prop ou state, nos dando pistas claras no processo de debug e otimização da aplicação.

Essa informação não é mostrada por padrão. Para sua visualização, é preciso ir nas configurações do profiler (ícone de engrenagem do lado direito da timeline) e clicar em record why each component rendered while profiling.

Tanto na sub-aba flamegraph quanto na ranked, do lado superior direito, podemos visualizar a contagem de re-renderizações ocorridas por modificações de state e props. Esta informação é valiosa para identificarmos possíveis renderizações indevidas por atualizações desnecessárias no estado do componente. Da mesma forma, podemos visualizar o tempo de processamento em cada atualização da tela.

Uma união interessante a se fazer é verificar se a sua aplicação tem uma boa performance mesmo em dispositivos menos potentes. Para tanto, é possível ir na aba performance do Google Chrome e limitar a capacidade do seu hardware. Com isso, podemos verificar o tempo de resposta em dispositivos mais fracos em união com o profiler.

Conclusão

React Devtools pode ser uma mão na roda quando buscamos otimizar a performance da sua aplicação. Nela, contamos com três formas distintas de verificar o tempo de processamento para renderização dos componente: flamegraph — permite a visualização dos tempos de renderização de cada componente, mostrados em forma de barras, respeitando a hierarquia dos componentes de acordo com o seu código; ranked — disponibiliza as mesmas informações, porém ordenadas de acordo com o tempo de renderização dos componentes; timeline — representa a linha de tempo da renderização dos componentes.

Espero que este artigo seja útil na sua jornada de debug e otimização da performance da sua aplicação.