Como escrever testes unitários usando React Recoil

Jul 17, 2024

Foto de George Desipris no Pexels.

O React Developer Tools é uma extensão do browser que ajuda (e muito) a desenvolver aplicações web usando React. Com essa extensão, é possível inspecionar a árvore de componentes, realizar o debbuging e profiling de componentes.

Entre as funcionalidades da extensão, a que mais utilizo no dia a dia é o Profiler para destacar quando um componentes sofre re-render. É uma ferramenta muito útil para identificar componentes que estão causando lentidão na aplicação ou que está se atualizando mais do que deveria. O gargalo sempre estará na etapa de renderização. Bem, sem mais delongas, vamos ver como funciona?

A extensão está disponível para todos os navegadores, basta acessar o site do React Developer Tools e instalar a extensão no navegador de preferência. Eu costumo utilizar o Chrome, portanto os prints serão referentes a este navegador.

Uma vez instalada, a extensão pode ser acessada usando o inspecionar elementos do navegador com o atalho Ctrl + Shift + I (ou Cmd + Shift + I no MacOS). Entre as opções do menu de desenvolvedor a opção Components e Profiler estarão disponíveis com um emoji ⚛️.

Opções do React Developer Tools.

Ao acessar a opção Profiler, será exibido um painel com as informaçes referentes a profiling. Selecione o ícone de engrenagem a direita do painel e marque a opção Record why each component rendered while profiling.

Painel do React Developer Tools Profiler.

Agora, todas as atualizaçes de estado que irão forçar o re-render de componentes serão destacados em tela. As cores variam de tons frios para os mais quentes, quanto mais quentes, mais rápido o componente está sendo atualizado. Veja um exemplo abaixo:

Painel do React Developer Tools Profiler com re-render.

Espero que essa ferramenta seja útil para vocês, e que ela possa ajudar a identificar gargalos em aplicações React.