Compound Components: composición inteligente
El patrón Compound Components permite construir componentes flexibles que trabajan juntos mediante composición. Es útil para tabs, accordions, dropdowns, modales y componentes donde varias piezas comparten estado.
La idea principal
En lugar de pasar decenas de props a un componente gigante, exponés piezas relacionadas que se combinan de forma declarativa.
<Tabs defaultValue="overview">
<Tabs.List>
<Tabs.Trigger value="overview">Resumen</Tabs.Trigger>
<Tabs.Trigger value="metrics">Métricas</Tabs.Trigger>
</Tabs.List>
<Tabs.Panel value="overview">Contenido general</Tabs.Panel>
<Tabs.Panel value="metrics">Contenido de métricas</Tabs.Panel>
</Tabs>Ventajas
- API más expresiva y cercana al HTML.
- Menos props booleanas difíciles de mantener.
- Mayor flexibilidad para ordenar o combinar piezas.
- Mejor separación entre estado compartido y presentación.
Cuándo evitarlo
No uses compound components para componentes simples. Si un botón solo necesita texto, icono y estado disabled, una API con props es suficiente.
Actividad práctica
Diseñá una API de compound components para un Accordion. Debe permitir múltiples items, un trigger por item y contenido desplegable.
Entregable
- Ejemplo de uso del componente.
- Lista de subcomponentes necesarios.
- Explicación de dónde viviría el estado abierto/cerrado.