React Melhores Práticas

O que React Melhores Práticas faz?

Guia abrangente de otimização de performance para aplicações React. Contém 37 regras em 7 categorias, priorizadas por impacto.

Categorias de Regras por Prioridade

Prioridade	Categoria	Impacto	Prefixo
1	Eliminando Waterfalls	CRÍTICO	async-
2	Otimização do Tamanho do Bundle	CRÍTICO	bundle-
3	Fetching de Dados no Cliente	MÉDIO-ALTO	client-
4	Otimização de Re-render	MÉDIO	rerender-
5	Performance de Renderização	MÉDIO	rendering-
6	Performance JavaScript	BAIXO-MÉDIO	js-
7	Padrões Avançados	BAIXO	advanced-

Referência Rápida

1. Eliminando Waterfalls (CRÍTICO)

• async-defer-await - Mova o await para os branches onde é realmente usado
• async-parallel - Use Promise.all() / allSettled() para operações independentes

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

• bundle-dynamic-imports - React.lazy() para componentes pesados
• bundle-defer-third-party - Carregue analytics/logging sob demanda
• bundle-conditional - Carregue módulos apenas quando o recurso está ativado
• bundle-preload - Pré-carregue ao passar o mouse/foco para velocidade percebida

3. Fetching de Dados no Cliente (MÉDIO-ALTO)

• client-query-dedup - Use TanStack Query para desduplicação automática de requisições
• client-event-listeners - Desduplique listeners de eventos globais
• client-passive-event-listeners - Use listeners passivos para performance de scroll
• client-localstorage-schema - Version e minimize dados no localStorage

4. Otimização de Re-render (MÉDIO)

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

5. 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 de coordenadas SVG
• rendering-activity - Use componente Activity para mostrar/esconder
• rendering-conditional-render - Use ternário, não && para condicionais

6. Performance 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 - Faça cache de propriedades de objeto em loops
• js-cache-function-results - Faça cache de resultados de funções em Map no nível do módulo
• js-cache-storage - Faça cache de leituras de localStorage/sessionStorage
• js-combine-iterations - Combine múltiplos filter/map em um único loop
• js-length-check-first - Verifique o tamanho do array antes de comparação cara
• js-early-exit - Retorne cedo das funções
• js-hoist-regexp - Içe 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

7. Padrões Avançados (BAIXO)

• advanced-event-handler-refs - Armazene handlers de eventos em refs
• advanced-use-latest - useLatest para callbacks de ref estáveis

Como Usar

Cada arquivo de regra em references/ contém: explicação, exemplos de código incorreto/correto e contexto. Leia arquivos individuais conforme necessário.