React Intermedio: Patrones y Optimización
Texto Leccion
Compound Components: Composición Inteligente
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">Resum
Tiempo de estudio
25 Min
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.
Texto Lessons
#1
Custom Hooks: Abstrayendo Lógica Compleja
#2
Context API: Estado Global sin Complejidades
#3
React.memo y useMemo: Evitando Renderizados Innecesarios
#4
Compound Components: Composición Inteligente
#5
useReducer: Máquinas de Estado para Componentes
#6
Code Splitting: Carga Perfumada para Mejores Experiencias
#7
Render Props: Compartiendo Lógica Visual
#8
Patrón Provider: Inyección de Dependencias
#9
ErrorBoundary React: ejemplo práctico y fallback
#10
High Order Components: Envolviendo Funcionalidad
#11
Arquitectura de Estado: Organización Escalable
#12
Testing con React Testing Library: Pruebas Centradas en el Usuario
Ver full lessons
Revisar curso learning pagina
