Padrões de Composição do React

Padrões de composição para construir componentes React flexíveis e fáceis de manter. Evite a proliferação de props booleanas usando componentes compostos, elevando o estado e compondo 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 Usar

Consulte estas diretrizes quando:

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

Categorias de Regras por Prioridade

Referência Rápida

1. Arquitetura de Componentes (ALTO)

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

2. Gerenciamento de Estado (MÉDIO)

• state-decouple-implementation - O provedor é o único local que sabe como o estado é gerenciado
• state-context-interface - Defina uma interface genérica com estado, ações, metadados para injeção de dependência
• state-lift-state - Mova o estado para componentes provedores para acesso de 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 renderX props

4. APIs do React 19 (MÉDIO)

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

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

Como Usar

Leia os arquivos de regras 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 e referências adicionais

Documento Compilado Completo

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

Limitações

• Use esta habilidade apenas quando a tarefa corresponder claramente ao escopo descrito acima.
• Não trate a saída como um substituto para validação específica do ambiente, testes ou revisão especializada.
• Pare e peça esclarecimentos se os inputs, permissões, limites de segurança ou critérios de sucesso necessários estiverem faltando.