- A Vercel divulgou o repositório estruturado
React-Best-Practices, baseado em mais de 10 anos de experiência em otimização de performance com React e Next.js
- Esse repositório foi projetado para que agentes de IA e LLMs possam tomar decisões consistentes de otimização durante revisão de código ou refatoração
- O ponto central é priorizar a eliminação de waterfalls e a redução do tamanho do bundle, com 8 categorias que cobrem também performance de servidor, cliente e renderização
- Cada regra inclui nível de importância (CRITICAL~LOW), além de exemplos de código incorreto e de correção
- Como são regras validadas em casos reais de produção, é possível dar suporte à otimização automática por meio da integração com agentes de codificação
Visão geral do React Best Practices
react-best-practices é um repositório que reúne mais de 10 anos de conhecimento acumulado em otimização para React e Next.js
- Ele foi estruturado para que agentes de IA e LLMs possam consultá-lo ao analisar código e sugerir melhorias
- Problemas de performance em React muitas vezes aparecem na forma de respostas a lentidão percebida após o release
- Os principais fatores apontados são execução sequencial de tarefas assíncronas, bundles de cliente cada vez maiores e re-renderizações desnecessárias
- Esses problemas acabam atuando como gargalos estruturais que geram custo recorrente em todas as sessões de usuário
Ideia central: otimização orientada por prioridade
- Muitas tentativas de melhorar performance começam em camadas mais baixas da stack e fracassam
- Por exemplo, se um waterfall de requisições adiciona 600ms, uma otimização com
useMemo não faz diferença
- Se cada página envia 300KB de JavaScript desnecessário, micro-otimizações em loops têm pouco efeito
- O framework começa com duas ações principais
- Eliminar waterfalls
- Reduzir o tamanho do bundle
- Depois disso, ele se expande na ordem de performance de servidor, data fetching no cliente e otimização de re-renderização
- No total, há 8 categorias e mais de 40 regras organizadas por ordem de importância
- O nível CRITICAL cobre eliminação de waterfalls e redução de bundle; o nível LOW cobre padrões avançados
Principais categorias incluídas
- O repositório aborda as seguintes 8 áreas de performance
- Eliminação de waterfalls assíncronos
- Otimização do tamanho do bundle
- Performance de servidor
- Data fetching no cliente
- Otimização de re-renderização
- Performance de renderização
- Padrões avançados
- Performance de JavaScript
- Cada regra fornece nível de impacto (CRITICAL~LOW) junto com exemplos de código incorreto e de correção
- Exemplo: código que espera dados em todos os ramos por causa de uma chamada
await desnecessária → corrigido ao reordenar as condicionais para aguardar apenas quando necessário
- Todos os arquivos de regras são compilados em
AGENTS.md, permitindo que agentes de IA os consultem diretamente durante code review
Regras reunidas com base em casos reais
- Todas as regras se baseiam em experiência real de melhoria de performance em codebases de produção
- Fusão de loops: código que percorria uma lista de mensagens 8 vezes foi reduzido para uma única passada, melhorando a eficiência no processamento de grandes volumes de dados
- Paralelização assíncrona: chamadas de banco de dados sem dependência entre si foram executadas em paralelo, reduzindo o tempo total de espera pela metade
- Ajuste de fallback de fontes: ao usar fontes do sistema, o espaçamento entre letras foi ajustado para manter uma exibição natural mesmo no estado de fallback
Integração com agentes de codificação
react-best-practices é fornecido como um pacote Agent Skills, podendo ser instalado em vários agentes de codificação
- Pode ser usado com Opencode, Codex, Claude Code, Cursor e outros
- Quando o agente detecta chamadas
useEffect aninhadas ou imports pesados no cliente, ele pode consultar a regra correspondente para sugerir correções
- Comando de instalação:
npx add-skill vercel-labs/agent-skills
- O repositório completo está disponível no GitHub em
react-best-practices
2 comentários
https://ywc.life/posts/vercel-react-best-practice
Fiz a tradução completa.
Obrigado! Vou ler com atenção.