aidenybai/react-scan

O que é?

Recursos principais

• 01Destaca na página os componentes que renderizam novamente sem necessidade
• 02Não exige alterações no código quando é adicionada por meio de uma tag de script
• 03Oferece uma barra de ferramentas na página para inspecionar renderizações
• 04Oferece as APIs scan, useScan e setOptions para controle programático
• 05Permite acompanhar as renderizações de um componente específico com onRender
• 06Inclui uma extensão para o navegador e guias de configuração para frameworks

Casos de uso

• Encontrar renderizações desnecessárias em uma aplicação React single-page lenta
• Verificar quais componentes renderizam novamente após uma mudança de estado durante o desenvolvimento
• Auditar um projeto Next.js ou Remix em busca de trabalho de renderização desnecessário
• Acompanhar as renderizações de um único componente com o hook onRender

Início rápido

1. 1

   Execute o comando init para detectar automaticamente seu framework e configurar o React Scan

   npx -y react-scan@latest init
2. 2

   Ou instale o pacote manualmente via npm

   npm install -D react-scan
3. 3

   Adicione a tag script ao seu app (por exemplo, em index.html, antes de qualquer outro script)

Antes de usar

• !O README recomenda o React Doctor como sucessor, então o React Scan pode receber menos atenção no desenvolvimento.
• !A configuração manual exige adicionar uma tag script ou código específico do framework, e o script é carregado de unpkg.com.

Tópicos

Perguntas frequentes

O que é react-scan?

Ferramenta de performance para React que detecta e destaca automaticamente componentes que renderizam novamente sem necessidade, sem exigir alterações no código. O React Scan encontra problemas de performance em aplicações React observando as renderizações e destacando os componentes que renderizam novamente sem necessidade. Ele pode ser adicionado com uma única tag de script ou por meio de um pacote npm, sem precisar alterar o código da aplicação.

react-scan é gratuito? Qual é a licença?

react-scan é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.

react-scan ainda é mantido?

Atualizado nos últimos 6 meses. O último commit de react-scan foi em 16 de ago. de 2026.

Para que posso usar react-scan?

Encontrar renderizações desnecessárias em uma aplicação React single-page lenta Verificar quais componentes renderizam novamente após uma mudança de estado durante o desenvolvimento Auditar um projeto Next.js ou Remix em busca de trabalho de renderização desnecessário Acompanhar as renderizações de um único componente com o hook onRender

Como instalar react-scan?

Execute o comando init para detectar automaticamente seu framework e configurar o React Scan: npx -y react-scan@latest init Ou instale o pacote manualmente via npm: npm install -D react-scan Adicione a tag script ao seu app (por exemplo, em index.html, antes de qualquer outro script)

Onde consigo react-scan?

O código-fonte e as instruções de instalação estão no GitHub: https://github.com/aidenybai/react-scan