React Scan
Aiden Bai / Million Software, Inc. · Programação
O React Scan é uma ferramenta gratuita e de código aberto que encontra e destaca os componentes do React que causam problemas de desempenho, sem mexer no seu código.
Sobre React Scan
O que é o React Scan
O React Scan é uma ferramenta leve de JavaScript que observa um app React em execução e sinaliza os componentes que renderizam mais do que deveriam. O React compara as props por referência, não por valor. Assim, um objeto ou uma função novos a cada renderização passam batido com facilidade, e esse erro silencioso explica por que tantos apps React ficam lentos mesmo quando o código parece certo.
Em vez de adivinhar, o React Scan desenha uma caixa ao redor de cada componente enquanto ele renderiza e a colore conforme o tempo que aquela renderização levou. Quanto mais pesada a renderização, mais visível o flash. Você observa a página, e o culpado se denuncia sozinho.
Funciona com configurações simples. Você não reescreve um único componente. Não precisa de etapa de build. Essa instalação simples é todo o argumento de uma ferramenta feita para desenvolvedores que já estão no fundo de uma pilha de configuração de framework.
Como começar
- Rode
npx -y react-scan@latest initno seu projeto. O comando detecta o seu framework, instala o pacote e conecta o script para você. - Ou instale manualmente com
npm install -D react-scane coloque a tag de script do unpkg no seuindex.htmlantes de qualquer outro script. - Carregue o app no navegador. Os componentes piscam conforme renderizam, com a barra de ferramentas sobre a página.
- Clique nos componentes que piscam para inspecionar contagens e tempos de renderização, depois mude o código que recalcula as props a cada passada.
- Desligue em produção. Ele foi feito para rodar em desenvolvimento, e forçá-lo em um build ao vivo é algo que a documentação desaconselha.
Informações do produto
Uma visão rápida dos preços, das plataformas compatíveis e do desempenho de React Scan.
Ideal para
Os usuários, tarefas e cenários em que esta ferramenta se encaixa melhor.
Usuários
- Desenvolvedores React ajustando uma interface lenta
- Times de frontend sem um especialista dedicado em desempenho
Tarefas
- Encontrar re-renderizações desperdiçadas
- Depurar por que uma página trava na interação
- Auditar uma biblioteca de componentes
- Detectar renderizações lentas cedo
Cenários
- Um painel que fica lento enquanto os gráficos carregam
- Um formulário que trava a cada tecla
- Um colega novo entrando em uma base de código React grande
Principais recursos
Não exige mudanças no código
Você adiciona o React Scan sem tocar nos seus componentes. Insere uma tag de script ou roda o comando init. Ele se conecta ao app sozinho. Não há componente wrapper, nem função de ordem superior, nem nada para limpar depois caso decida removê-lo.
Destaque visual da renderização
A ferramenta contorna cada componente enquanto ele renderiza e colore o contorno conforme o tempo de renderização. Renderizações lentas se destacam na hora. Você não lê números numa tabela primeiro; observa a página e deixa o visual te levar até o problema.
Vários caminhos de instalação
Você pode carregar o React Scan por uma tag de script do unpkg, instalá-lo como pacote npm ou usar a extensão de navegador. Há guias específicos para Next.js, Remix e configurações simples. Você não fica traduzindo docs escritos para outra pilha.
Barra de ferramentas e opções ao vivo
Uma barra de ferramentas fica na página durante o escaneamento, e você pode ligar ou desligar o escaneamento sem reiniciar. As funções scan e useScan iniciam, setOptions e getOptions ajustam em tempo de execução, e onRender se conecta a um componente só quando você precisa olhar de perto.
Log no console e hooks de tempo
Ligue a opção log e cada renderização é impressa no console com seu tempo. Os hooks de commit (onCommitStart e onCommitFinish) disparam em torno de cada passada de renderização, o que ajuda quando você quer relacionar o trabalho do React com o que vê na tela.
Código aberto e gratuito
O React Scan é distribuído sob a licença MIT por Aiden Bai e Million Software, Inc. Não há nível pago, limite de assentos nem cadastro. O código está no GitHub. O projeto aceita contribuições e relatos de bugs abertamente.
Prós e contras
Prós
- Zero atrito na instalação: o comando init faz a detecção do framework e a instalação para você.
- O retorno visual deixa renderizações desperdiçadas óbvias para qualquer um, não só para especialistas em desempenho.
- Gratuito e com licença MIT, então entra em projetos comerciais sem uma conversa sobre orçamento.
- Funciona com React puro, Next.js, Remix e uso como extensão de navegador.
- A API de tempo de execução e o hook onRender permitem cavar mais fundo quando a sobreposição não basta.
Contras
- Roda só em desenvolvimento, então não pega problemas de desempenho que aparecem apenas em um build de produção.
- A sobreposição visual só aparece na tela, ou seja, você não consegue escanear um ambiente headless nem uma página renderizada no servidor antes de chegar ao navegador.
- Se você não se sente à vontade com npm ou uma tag de script, a instalação ainda pede um pequeno passo no projeto, e a documentação presume certa familiaridade com React.
Perguntas frequentes
Sim. O React Scan é software de código aberto publicado sob a licença MIT, e não há plano pago nem conta. Você instala o pacote e o usa no seu projeto sem custo.
Conteúdo relacionado
Explore ferramentas, skills e artigos relacionados a React Scan.
Alternativas a React Scan
Forefront
Forefront · ProgramaçãoO Forefront é uma plataforma web para construir com IA de código aberto. Você ajusta os principais modelos de linguagem de código aberto com seus próprios dados, avalia o desempenho deles e os roda por uma API ou os exporta para hospedar por conta própria. Desenvolvedores que querem a conveniência de uma plataforma fechada, mas fazem questão de ser donos dos modelos e dos dados, são o público-alvo aqui.
Startkit
StartKit.AI · ProgramaçãoStartkit é um boilerplate para criar produtos de SaaS com IA e wrappers de IA. Pense nele como um boilerplate para startups de IA com as partes chatas já conectadas: autenticação, pagamentos com Stripe e Lemon Squeezy, limites de uso, e-mail transacional e um kit inicial de API de IA que conversa com OpenAI, Anthropic, Groq ou Llama. Você clona o repositório, define seu preço e começa pela parte do produto que as pessoas realmente pagam. Ele é feito em Next.js sobre React e Tailwind, então boa parte do código boilerplate já parece familiar.
Testim
Tricentis · ProgramaçãoO Testim é uma plataforma de automação de testes com IA para criar e executar testes de ponta a ponta em aplicações web, mobile e Salesforce. Ele se apoia no aprendizado de máquina para manter os testes estáveis quando uma interface muda, então as equipes gastam menos tempo consertando seletores quebrados. Nada mal para uma ferramenta de testes automatizados que você pode começar a usar hoje. Você cria testes gravando ações no navegador e depois adiciona JavaScript quando precisa de mais controle. É uma escolha sólida para equipes de QA ocupadas.