Habilidades react-best-practices

📦

react-best-practices

Name: react-best-practices
Author: sickn33

Seguro

Otimize o Desempenho do React e Next.js com as Melhores Práticas da Vercel

Também disponível em: 0xBigBoss,0xBigBoss,vercel-labs

O desempenho ruim do React leva a tempos de carregamento lentos e usuários frustrados. Esta skill fornece 45 regras priorizadas da Engenharia da Vercel para eliminar waterfalls, reduzir tamanhos de bundle e otimizar a renderização.

Suporta: Claude Codex Code(CC)

📊 69 Adequado

Baixar o ZIP da skill

Upload no Claude

Vá em Configurações → Capacidades → Skills → Upload skill

Ative e comece a usar

Testar

A utilizar "react-best-practices". Revise este padrão de busca de dados para waterfalls

Resultado esperado:

ISSUE: Chamadas sequenciais de await criam waterfall (3 round trips)
const user = await fetchUser()
const posts = await fetchPosts()
const comments = await fetchComments()
FIX: Use Promise.all() para execução paralela (1 round trip)
const [user, posts, comments] = await Promise.all([
fetchUser(),
fetchPosts(),
fetchComments()
])

A utilizar "react-best-practices". Como fazer lazy load de um componente pesado de editor de código

Resultado esperado:

Use next/dynamic para lazy loading de componentes pesados:
import dynamic from 'next/dynamic'
const MonacoEditor = dynamic(
() => import('./monaco-editor').then(m => m.MonacoEditor),
{ ssr: false, loading: () => <LoadingSkeleton /> }
)
Isso adia ~300KB de bundle até o componente renderizar, melhorando TTI.

Auditoria de Segurança

Seguro

v1 • 2/24/2026

Static analyzer detected 912 patterns but all are FALSE POSITIVES. The skill contains markdown documentation with code examples for educational purposes, not executable code. Patterns like 'backtick execution' are shell commands in README examples (pnpm build), 'dynamic imports' are React next/dynamic usage examples, 'storage access' shows localStorage caching patterns, and 'network' patterns are fetch API documentation examples. No actual security vulnerabilities exist.

Arquivos analisados

4,906

Linhas analisadas

achados

Total de auditorias

Nenhum problema de segurança encontrado

Auditado por: claude

Pontuação de qualidade

Arquitetura

100

Manutenibilidade

Conteúdo

Comunidade

100

Segurança

Conformidade com especificações

O Que Você Pode Construir

Desenvolvedor Frontend Construindo Aplicações React

Use esta skill ao escrever novos componentes ou páginas para garantir desempenho ideal desde o início. A skill guia otimização de bundle, padrões adequados de busca de dados e técnicas de prevenção de re-renderização.

Tech Lead Revisando Pull Requests

Consulte estas regras durante a revisão de código para capturar anti-padrões de desempenho como chamadas async sequenciais, imports barrel desnecessários ou limites de Suspense ausentes antes de fazer o merge.

IA Refatorando Código Legado

Aplique estas regras priorizadas para melhorar sistematicamente bases de código React existentes, começando com eliminação crítica de waterfalls antes de abordar otimizações de renderização de impacto médio.

Tente Estes Prompts

Revisar Componente para Problemas de Desempenho

Revise este componente React usando as melhores práticas da Vercel. Identifique waterfalls, re-renderizações desnecessárias e oportunidades de otimização de bundle. Sugira correções específicas com exemplos de código.

Refatorar Busca Sequencial para Paralela

Refatore este código para eliminar async waterfalls. Use Promise.all() para operações independentes e mova os awaits para os branches onde os resultados são realmente necessários.

Otimizar Tamanho de Bundle para Componentes Pesados

Aplique estratégias de code splitting neste componente. Identifique oportunidades para next/dynamic imports, carregamento condicional e preloading em interações do usuário.

Corrigir Problemas de Desempenho de Re-renderização

Analise este componente para re-renderizações desnecessárias. Aplique memoização, arrays de dependência adequados, assinaturas de estado derivado e padrões de setState funcional conforme apropriado.

Melhores Práticas

Comece com eliminação crítica de waterfalls antes de otimizações de impacto médio
Use React.cache() para deduplicação por requisição e cache LRU para cache entre requisições
Extraia callbacks estáveis usando setState funcional e armazene handlers em refs quando necessário

Evitar

Chamadas sequenciais de await para operações independentes
Importando bibliotecas de utilitários inteiras em vez de funções específicas
Passando funções diretamente como dependências de effects em vez de primitivos

Perguntas Frequentes

Quais versões do React são suportadas?

A maioria dos padrões funciona com React 17+. Padrões avançados como startTransition, useTransition e Suspense para busca de dados requerem React 18+.

Posso usar isso com JavaScript em vez de TypeScript?

Sim, todos os padrões se aplicam a projetos JavaScript. Os exemplos usam sintaxe TypeScript para clareza, mas os conceitos transferem-se diretamente.

Devo aplicar todas as 45 regras de uma vez?

Não. Comece com regras de prioridade CRÍTICA (async waterfalls, otimização de bundle) para máximo impacto, depois addressed priorities HIGH e MEDIUM progressivamente.

Esta skill funciona com o Next.js App Router?

Sim. Padrões de componentes de servidor como React.cache(), use cache() e busca paralela de servidor são especificamente projetados para arquitetura do App Router.

Como measure melhorias de desempenho?

Use Web Vitals (LCP, FID, CLS) e React DevTools Profiler. A skill fornece estimativas de impacto como 'melhoria de 2-10x' para cada padrão.

O Claude Code pode aplicar essas correções automaticamente?

Sim. Forneça o contexto da skill e peça ao Claude Code para revisar ou refatorar arquivos específicos. Ele aplicará regras apropriadas com exemplos de código.