patrones-de-composición-en-react

Patrones de Composición en React

Patrones de composición para construir componentes React flexibles y mantenibles. Evita la proliferación de propiedades booleanas mediante el uso de componentes compuestos, elevación de estado y composición interna. Estos patrones hacen que los códigos base sean más fáciles de manejar tanto para humanos como para agentes de IA a medida que escalan.

Cuándo Aplicar

Consulta estas pautas cuando:

• Refactorices componentes con muchas propiedades booleanas
• Construyas bibliotecas de componentes reutilizables
• Diseñes APIs de componentes flexibles
• Revises la arquitectura de componentes
• Trabajes con componentes compuestos o proveedores de contexto

Categorías de Reglas por Prioridad

Prioridad	Categoría	Impacto	Prefijo
1	Arquitectura de Componentes	ALTO	architecture-
2	Gestión de Estado	MEDIO	state-
3	Patrones de Implementación	MEDIO	patterns-
4	APIs de React 19	MEDIO	react19-

Referencia Rápida

1. Arquitectura de Componentes (ALTO)

• architecture-avoid-boolean-props - No agregues propiedades booleanas para personalizar el comportamiento; usa composición
• architecture-compound-components - Estructura componentes complejos con contexto compartido

2. Gestión de Estado (MEDIO)

• state-decouple-implementation - El proveedor es el único lugar que sabe cómo se gestiona el estado
• state-context-interface - Define una interfaz genérica con estado, acciones y metadatos para inyección de dependencias
• state-lift-state - Mueve el estado a componentes proveedores para acceso entre hermanos

3. Patrones de Implementación (MEDIO)

• patterns-explicit-variants - Crea componentes de variante explícita en lugar de modos booleanos
• patterns-children-over-render-props - Usa children para composición en lugar de props renderX

4. APIs de React 19 (MEDIO)

⚠️ Solo React 19+. Omite esta sección si usas React 18 o anterior.

• react19-no-forwardref - No uses forwardRef; usa use() en lugar de useContext()

Cómo Usar

Lee los archivos de reglas individuales para obtener explicaciones detalladas y ejemplos de código:

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

Cada archivo de regla contiene:

• Explicación breve de por qué es importante
• Ejemplo de código incorrecto con explicación
• Ejemplo de código correcto con explicación
• Contexto adicional y referencias

Documento Compilado Completo

Para la guía completa con todas las reglas expandidas: AGENTS.md