mastra-ai/react-best-practices

O que react-best-practices faz?

Diretrizes de otimização de desempenho React da Mastra Engineering. Esta skill deve ser usada ao escrever, revisar ou refatorar código React para garantir padrões de desempenho ideais. É ativada em tarefas que envolvem componentes React, busca de dados, otimização de bundle ou melhorias de desempenho.

Práticas de Componentes

• Use React.memo em componentes que recebem props frequentemente e não mudam a saída com base nelas. Evite memoizar tudo — apenas o que realmente se beneficia.
• Mantenha componentes puros e previsíveis. Evite efeitos colaterais dentro do corpo do componente.
• Use fragmentos (<>...</>) para evitar nós extras no DOM.
• Prefira children a múltiplos níveis de wrapper, a menos que haja uma separação clara de preocupações.

Gerenciamento de Estado

• Promova o estado o mais próximo possível de onde ele é usado (elevação mínima necessária).
• Para estado compartilhado entre muitos componentes distantes, considere useContext ou uma biblioteca de gerenciamento de estado (Redux, Zustand, Jotai).
• Evite re-renderizações desnecessárias: use useMemo e useCallback estrategicamente — não para tudo.
• Prefira estado derivado com useMemo em vez de armazenar valores calculados no estado.

Busca de Dados e Efeitos Colaterais

• Use bibliotecas de busca de dados como TanStack Query (React Query) ou SWR para cache, refetch e sincronização de servidor.
• Com React 18+, use useTransition e Suspense para estados de carregamento e atualizações não urgentes.
• Evite useEffect para lógica de busca de dados se o framework/nível do projeto suportar data fetching declarativo (ex.: loaders do Remix/Next.js).
• Lembre-se de limpar efeitos colaterais (event listeners, timers, subscrições) no retorno de useEffect.

Performance e Bundle

• Use lazy loading com React.lazy() e Suspense para componentes que não são necessários imediatamente.
• Implemente code splitting no nível de rota (ex.: Next.js dynamic imports, React Router lazy routes).
• Evite imports grandes e desnecessários — use tree-shaking e imports dinâmicos com import().
• Prefira Vite, Next.js ou outros bundlers modernos que oferecem otimizações de produção.

Renderização de Listas

• Sempre use uma chave (key) estável e única para itens de lista. Evite usar índices de array como chave se a lista puder ser reordenada ou filtrada.
• Para listas muito grandes, considere virtualização (bibliotecas como react-window, react-virtuoso).
• Extraia itens de lista em componentes separados para memoização (com React.memo).

Otimização de Re-renderizações

• Evite criar novas funções ou objetos dentro do corpo do componente sem necessidade — mova para fora ou use useCallback, useMemo.
• Use React.memo para evitar re-renderizações de componentes filhos quando as props não mudam.
• Prefira o padrão de composição: mova estado pesado para um container e passe props para componentes filhos puros.
• Use useMemo em computações caras que dependem de props ou estado.

Boas Práticas com Hooks

• Hooks devem ser chamados no nível superior do componente, não dentro de condicionais, loops ou funções aninhadas.
• Use hooks personalizados para encapsular lógica de estado ou efeitos reutilizáveis.
• Prefira useReducer para estado complexo que envolve múltiplos sub-valores ou transições de estado.
• Evite efeitos em cascata — um useEffect não deve acionar outro useEffect desnecessariamente.

Critérios de Revisão de Código

• Uso adequado de useMemo e useCallback?
• Componentes listados com chaves estáveis?
• Lógica de busca de dados usando biblioteca apropriada (TanStack Query, SWR)?
• Componentes grandes divididos em partes menores?
• Estado promovido corretamente?
• Lazy loading e code splitting aplicados quando necessário?
• Efeitos colaterais limpos?
• Perfil de performance medido (React DevTools Profiler, Lighthouse)?

Ferramentas e Métricas

• Use React DevTools Profiler para identificar gargalos de renderização.
• Configure Lighthouse ou PageSpeed Insights para métricas de performance web.
• Analise o bundle com Vite Bundle Analyzer, webpack-bundle-analyzer ou next-bundle-analyzer.
• Monitore Core Web Vitals (FCP, LCP, CLS) no ambiente de produção.

Leitura Adicional

• React Docs: Optimizing Performance
• React Patterns
• Use React.memo wisely