Visualize a performance dos componentes React usando Performance/Timeline tools do seu navegador e react perf.
Hoje perguntei a mim mesmo e a alguns amigos de trabalho se existia alguma ferramenta que pudesse detalhar a performance dos componentes React.
Detalhes sobre o tempo de renderização dos components, update dos components…
E com essas informações, poderíamos ter dados concretos e se possível, tomar decisões para buscar uma melhoria de performance.
Fiz algumas pesquisas e encontrei no próprio site do React algo que eu procurava, o recurso se chama react perf.
Como usar?
Na devtools de alguns browsers existe a aba Performance ou Timeline. Chrome e Edge já possuem esta ferramenta. Lá você pode encontrar informações de network, interações e até consumo de memória e GPU.
A informação aqui que nos interessa se chama User Timing, e para que ela apareça você precisa efetuar os seguintes passos.
Mãos na massa!
Faça o acesso da sua aplicação utilizando /?react_perf no fim da url.
Exemplo: http://localhost:3000/?react_perf
Agora você terá que iniciar uma escuta(Record) para que você comece a gravar informações da operação feita durante a gravação. Feito o processo que você deseja analisar, sejá navegando ou renderizando sua página, você terá que pausar a gravação. Após pausar, os detalhes na label User Timing poderão ser consultados. Ago parecido com isso:
Contendo detalhes de quando o component foi renderizado, quando foi atualizado e quando acabou de ser montado. Possuindo também uma timeline com screenshots do processo gravado.
Os números de cada renderização podem variar por serem relativos. Mas isso já te da um norte do que se pode melhorar.
E após realizar modificações, você pode simplesmente dar um reload na sua gravação e verificar os novos resultados.
E o React 16, vai trazer melhorar performance ?
Aproveitando o gancho aqui, vamos falar sobre algo que é muito discutido, pois diferente dos frameworks como Preact e Inferno, o React demonstra uma desvantagem com relação aos “concorrentes” citados acima.
Mas calma, isso já foi solucionado na versão 16. Como foi citado pelo Keuller Magalhães na React Conf BR 2017, os números melhoraram significativamente e isto prova que irá trazer um melhor benefício com relação a desempenho. Mas ainda que os números estejam próximos, React ainda está atras quando o quesito é performance e size da lib.
