Melhores Práticas do React na Vercel

Guia abrangente de otimização de performance para aplicações React e Next.js, mantido pela Vercel. Contém 45 regras divididas em 8 categorias, priorizadas pelo impacto para guiar refatoração automatizada e geração de código.

Quando Usar

Consulte estas diretrizes quando:

• Escrever novos componentes React ou páginas Next.js
• Implementar busca de dados (lado do cliente ou do servidor)
• Revisar código em busca de problemas de performance
• Refatorar código React/Next.js existente
• Otimizar o tamanho do bundle ou tempos de carregamento

Categorias de Regras por Prioridade

Referência Rápida

1. Eliminação de Cascata (Waterfalls) (CRÍTICO)

• async-defer-await - Mova await para branches onde é realmente usado
• async-parallel - Use Promise.all() para operações independentes
• async-dependencies - Use better-all para dependências parciais
• async-api-routes - Inicie promises cedo, aguarde tarde em rotas de API
• async-suspense-boundaries - Use Suspense para transmitir conteúdo

2. Otimização do Tamanho do Bundle (CRÍTICO)

• bundle-barrel-imports - Importe diretamente, evite arquivos "barrel"
• bundle-dynamic-imports - Use next/dynamic para componentes pesados
• bundle-defer-third-party - Carregue analytics/logging após a hidratação
• bundle-conditional - Carregue módulos apenas quando a funcionalidade for ativada
• bundle-preload - Pré-carregue ao passar o mouse/focar para velocidade percebida

3. Performance do Lado do Servidor (ALTO)

• server-cache-react - Use React.cache() para deduplicação por requisição
• server-cache-lru - Use cache LRU para cache entre requisições
• server-serialization - Minimize dados passados para componentes do cliente
• server-parallel-fetching - Reestruture componentes para paralelizar buscas
• server-after-nonblocking - Use after() para operações não bloqueantes

4. Busca de Dados do Lado do Cliente (MÉDIO-ALTO)

• client-swr-dedup - Use SWR para deduplicação automática de requisições
• client-event-listeners - Deduplique listeners de eventos globais

5. Otimização de Re-renderização (MÉDIO)

• rerender-defer-reads - Não se inscreva em estado usado apenas em callbacks
• rerender-memo - Extraia trabalho custoso para componentes memoizados
• rerender-dependencies - Use dependências primitivas em efeitos
• rerender-derived-state - Inscreva-se em booleanos derivados, não em valores brutos
• rerender-functional-setstate - Use setState funcional para callbacks estáveis
• rerender-lazy-state-init - Passe função para useState para valores custosos
• rerender-transitions - Use startTransition para atualizações não urgentes

6. Performance de Renderização (MÉDIO)

• rendering-animate-svg-wrapper - Anime o wrapper div, não o elemento SVG
• rendering-content-visibility - Use content-visibility para listas longas
• rendering-hoist-jsx - Extraia JSX estático para fora dos componentes
• rendering-svg-precision - Reduza a precisão das coordenadas SVG
• rendering-hydration-no-flicker - Use script inline para dados apenas do cliente
• rendering-activity - Use o componente Activity para mostrar/ocultar
• rendering-conditional-render - Use ternário, não && para condicionais

7. Performance de JavaScript (BAIXO-MÉDIO)

• js-batch-dom-css - Agrupe mudanças de CSS via classes ou cssText
• js-index-maps - Construa Map para buscas repetidas
• js-cache-property-access - Armazene em cache propriedades de objetos em loops
• js-cache-function-results - Armazene em cache resultados de funções em Map no nível do módulo
• js-cache-storage - Armazene em cache leituras de localStorage/sessionStorage
• js-combine-iterations - Combine múltiplos filter/map em um único loop
• js-length-check-first - Verifique o comprimento do array antes de comparações custosas
• js-early-exit - Retorne cedo de funções
• js-hoist-regexp - Eleve a criação de RegExp para fora dos loops
• js-min-max-loop - Use loop para min/max em vez de sort
• js-set-map-lookups - Use Set/Map para buscas O(1)
• js-tosorted-immutable - Use toSorted() para imutabilidade

8. Padrões Avançados (BAIXO)

• advanced-event-handler-refs - Armazene manipuladores de eventos em refs
• advanced-use-latest - Use useLatest para refs de callback estáveis

Como Usar

…