Habilidades vercel-react-best-practices

📦

vercel-react-best-practices

Name: vercel-react-best-practices
Author: sickn33

Seguro

Otimize o desempenho do React e Next.js

Também disponível em: ZhanlinCui,vercel-labs,am-will

Construa aplicações React e Next.js mais rápidas com padrões de desempenho comprovados. Esta skill fornece diretrizes acionáveis da Engenharia da Vercel para eliminar waterfalls, reduzir o tamanho do 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 "vercel-react-best-practices". Componente com useEffects de busca sequenciais

Resultado esperado:

Problema: Três hooks useEffect buscam dados sequencialmente, causando render waterfall. Solução: Combine as buscas em um único useEffect com Promise.all() ou converta o componente pai para server component.

A utilizar "vercel-react-best-practices". Import statement puxando toda a biblioteca lodash

Resultado esperado:

Problema: import _ from 'lodash' adiciona 72KB ao bundle. Solução: Use imports tree-shakeable como import debounce from 'lodash/debounce' ou migre para lodash-es para melhor otimização do bundler.

A utilizar "vercel-react-best-practices". Componente recalculando valor caro em toda renderização

Resultado esperado:

Problema: Computação cara executa em toda renderização. Solução: Envolva em useMemo com dependências adequadas, ou extraia para um componente memoizado separado que só faz re-render quando as entradas mudam.

Auditoria de Segurança

Seguro

v1 • 2/25/2026

Static analysis detected 911 pattern matches across 51 files (4901 lines), but all findings are FALSE POSITIVES. The skill is a documentation-only repository containing React/Next.js performance optimization guidelines in markdown format. Detected patterns (shell commands, dynamic imports, fetch calls, storage access) exist solely as code examples within documentation, not as executable code. No actual security risks identified.

Arquivos analisados

4,901

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

Construindo novas funcionalidades React

Desenvolvedores React construindo novas funcionalidades escrevem componentes com desempenho ótimo desde o início, seguindo padrões aprovados pela Vercel para busca de dados, renderização e otimização de bundle

Revisando pull requests

Equipes revisando pull requests verificam o código em busca de anti-padrões de desempenho antes de fazer merge, detectando waterfalls, re-renderizações desnecessárias e inchaço do bundle no início do desenvolvimento

Migrando para Next.js App Router

Engenheiros migrando para Next.js App Router convertem padrões client-side para arquitetura de server components, aprendendo o uso adequado de cache no servidor, limites de serialização e busca de dados em paralelo

Tente Estes Prompts

Revisar componente em busca de problemas de desempenho

Revise este componente React em busca de problemas de desempenho. Identifique quaisquer render waterfalls, re-renderizações desnecessárias ou oportunidades de otimização de bundle. Sugira melhorias específicas baseadas nas melhores práticas da Vercel.

Corrigir waterfall de busca de dados

Este componente busca dados sequencialmente. Refatore-o para buscar em paralelo usando Promise.all() ou restruture como server components. Explique qual abordagem é melhor para este caso de uso.

Otimizar cache de server component

Analise a busca de dados deste server component. Recomende uma estratégia de cache usando React.cache() para deduplicação por-request ou cache LRU para otimização cross-request. Inclua considerações sobre invalidação de cache.

Arquitetar desempenho de dashboard multi-página

Projete um dashboard com 10+ widgets exibindo dados em tempo real e históricos. Especifique: 1) Limites entre server e client components, 2) Estratégia de busca de dados e cache, 3) Estados de carregamento com Suspense, 4) Otimização de bundle para bibliotecas de gráficos de terceiros.

Melhores Práticas

Inicie promises cedo e aguarde tarde - inicie a busca de dados antes de ser necessária, adie o await até que o valor seja necessário
Use server components por padrão - apenas adicione 'use client' quando APIs do navegador ou interatividade forem necessárias
Prefira SWR ou React Query para busca de dados no client - cache integrado, deduplicação e revalidação

Evitar

Busca de dados sequencial em hooks useEffect separados - causa render waterfalls
Importar bibliotecas de utilitários inteiras - bundles inchados, use imports específicos em vez disso
Usar && para renderização condicional de componentes que renderizam '0' - use operador ternário

Perguntas Frequentes

Quando devo usar server components vs client components?

Padrão para server components para busca de dados, computação pesada e integrações backend. Use client components apenas para interatividade (useState, useEffect), APIs do navegador ou manipuladores de eventos. Mantenha client components nos nós folha da sua árvore de componentes.

Como corrijo render waterfalls nos meus componentes?

Use Promise.all() para fetches independentes, restruture para busca em paralelo em server components, ou use bibliotecas como better-all para dependências parciais. Inicie fetches cedo (nível superior) e aguarde tarde (onde necessário).

Qual é a diferença entre React.cache() e cache LRU?

React.cache() fornece deduplicação por-request - faz cache dentro de um único render. Cache LRU persiste entre requests usando stores externos como Redis ou Map em memória. Use cache() para deduplicação, LRU para dados caros cross-request.

Como posso reduzir o tamanho do bundle do meu Next.js?

Use next/dynamic para componentes pesados, importe utilitários diretamente (não arquivos barrel), adie scripts de terceiros até após a hidratação e use imports condicionais para funcionalidades não necessárias no carregamento inicial. Verifique o bundle analyzer com next-bundle-analyzer.

Por que o SWR ajuda na busca de dados client-side?

SWR fornece deduplicação automática de requests (múltiplos componentes solicitando os mesmos dados compartilham um único fetch), cache com estratégia stale-while-revalidate, revalidação de foco e atualizações otimistas. Reduz requests de rede e melhora a performance percebida.

Quando devo usar startTransition?

Use startTransition para atualizações de estado não-urgentes que podem ser interrompidas, como filtrar listas grandes ou digitar em inputs de busca. Mantém a UI responsiva permitindo que o React priorize interações do usuário sobre atualizações em segundo plano.