vercel-composition-patterns

Padrões de Composição React

Padrões de composição para construir componentes React flexíveis e sustentáveis. Evite a proliferação de props booleanas usando componentes compostos, elevação de estado e composição de internos. Esses padrões tornam as bases de código mais fáceis de trabalhar tanto para humanos quanto para agentes de IA à medida que escalam.

Quando Aplicar

Consulte estas diretrizes quando:

• Refatorando componentes com muitas props booleanas
• Construindo bibliotecas de componentes reutilizáveis
• Projetando APIs de componentes flexíveis
• Revisando arquitetura de componentes
• Trabalhando com componentes compostos ou provedores de contexto

Categorias de Regras por Prioridade

Prioridade	Categoria	Impacto	Prefixo
1	Arquitetura de Componentes	ALTO	architecture-
2	Gerenciamento de Estado	MÉDIO	state-
3	Padrões de Implementação	MÉDIO	patterns-
4	APIs do React 19	MÉDIO	react19-

Referência Rápida

1. Arquitetura de Componentes (ALTO)

• architecture-avoid-boolean-props - Não adicione props booleanas para personalizar comportamento; use composição
• architecture-compound-components - Estruture componentes complexos com contexto compartilhado

2. Gerenciamento de Estado (MÉDIO)

• state-decouple-implementation - O Provider é o único lugar que sabe como o estado é gerenciado
• state-context-interface - Defina interface genérica com estado, ações e meta para injeção de dependência
• state-lift-state - Mova o estado para componentes provedores para acesso entre irmãos

3. Padrões de Implementação (MÉDIO)

• patterns-explicit-variants - Crie componentes de variante explícitos em vez de modos booleanos
• patterns-children-over-render-props - Use children para composição em vez de props do tipo renderX

4. APIs do React 19 (MÉDIO)

⚠️ Apenas React 19+. Pule esta seção se estiver usando React 18 ou versão anterior.

• react19-no-forwardref - Não use forwardRef; use use() em vez de useContext()

Como Usar

Leia os arquivos de regra individuais para explicações detalhadas e exemplos de código:

rules/architecture-avoid-boolean-props.md
rules/state-context-interface.md

Cada arquivo de regra contém:

• Breve explicação de por que é importante
• Exemplo de código incorreto com explicação
• Exemplo de código correto com explicação
• Contexto adicional e referências

Documento Compilado Completo

Para o guia completo com todas as regras expandidas: AGENTS.md