La composición sobre la herencia — Construir interfaces flexibles mediante la composición de componentes en lugar de extenderlos

Receta

// Composición basada en slots: pasa componentes como props
function Layout({ header, sidebar, children }: {
  header: React.ReactNode;
  sidebar: React.ReactNode;
  children: React.ReactNode;
}) {
  return (
    <div className="grid grid-cols-[240px_1fr] grid-rows-[64px_1fr]">
      <header className="col-span-2">{header}</header>
      <aside>{sidebar}</aside>
      <main>{children}</main>
    </div>
  );
}
 
// Uso
<Layout
  header={<TopNav user={currentUser} />}
  sidebar={<SideMenu items={menuItems} />}
>
  <Dashboard data={dashboardData} />
</Layout>

Cuándo usarlo: Siempre que necesites un contenedor, diseño o contenedor reutilizable que deba permanecer agnóstico sobre su contenido. Prefiere la composición sobre la herencia en todos los casos en React.

Ejemplo funcionando

import { type ReactNode } from "react";
 
// Un componente Card con slots componibles
interface CardProps {
  media?: ReactNode;
  actions?: ReactNode;
  children: ReactNode;
  variant?: "elevated" | "outlined";

Lo que esto demuestra:

• Patrón de slot mediante props con nombre ReactNode (media, actions, children)
• Especialización envolviendo un componente genérico (Card) dentro de uno específico del dominio (ProductCard)
• Cero herencia — ProductCard no es una subclase de Card

Inmersión profunda

Cómo funciona

• Los componentes de React son funciones que devuelven JSX. No hay ninguna jerarquía de clases para extender.
• children es la primitiva de composición principal — cualquier JSX anidado dentro de un componente se pasa como props.children.
• Los slots con nombre (props tipadas como ReactNode) te permiten inyectar contenido en posiciones específicas dentro del diseño de un componente.
• La especialización se logra creando un nuevo componente que renderiza un componente general con props específicas pre-rellenas.
• La contención se logra mediante componentes que no conocen sus children de antemano y usan {children} como marcador de posición.

Parámetros y valores de retorno

Variaciones

Patrón de inyección de componentes — pasa un tipo de componente en lugar de un elemento renderizado:

interface ListProps<T> {
  items: T[];
  renderItem: React.ComponentType<{ item: T }>;
}
 
function List<T>({ items, renderItem: Item }

Composición de proveedores — aplana los proveedores de contexto anidados:

function AppProviders({ children }: { children: ReactNode }) {
  return (
    <ThemeProvider>
      <AuthProvider>
        <QueryProvider>
          {children}
        </QueryProvider>
      </AuthProvider>

Notas de TypeScript

• Usa ReactNode para slots que aceptan cualquier contenido renderizable (strings, elementos, fragmentos, null).
• Usa React.ComponentType<P> cuando necesites pasar un componente que será instanciado con props específicas.
• Usa ReactElement solo cuando necesites limitar a elementos JSX reales (excluyendo strings y números).
• La composición genérica (List<T>) preserva la seguridad de tipos en todo el límite del componente.

Trampas

• Sobreuso de children para múltiples slots — Cuando pasas todo como children, pierdes el control sobre la colocación. Solución: Usa props con nombre ReactNode para áreas de contenido distintas.

• Prop drilling a través de capas compuestas — La composición profunda puede llevar a pasar props a través de muchos niveles. Solución: Usa contexto para preocupaciones realmente transversales y mantén la composición superficial.

• Romper la memoización con slots JSX en línea — Pasar <Component /> en línea como una prop crea una nueva referencia de elemento en cada renderizado. Solución: Eleva el contenido de slot estático fuera del renderizado o envuelve con useMemo para árboles costosos.

• Confundir especialización con configuración — Crear un nuevo componente solo para establecer algunas props está bien; crear un contenedor que re-expone todas las props originales es una señal de que necesitas composición, no envolvimiento. Solución: Usa el componente original directamente y pasa props en el sitio de llamada.

Alternativas

Preguntas frecuentes

// Elemento renderizado: pasas JSX
<Card media={<img src={url} alt="photo" />} />
 
// Inyección de componentes: pasas un tipo de componente
<List items={data} renderItem={ProductRow} />

function AppProviders({ children }: { children: ReactNode }) {
  return (
    <ThemeProvider>
      <AuthProvider>
        <QueryProvider>
          {children}
        </QueryProvider>
      </

interface ListProps<T> {
  items: T[];
  renderItem: React.ComponentType<{ item: T }>;
}
 
function List<T>({ items, renderItem: 

interface LayoutProps {
  header: ReactNode;
  sidebar: ReactNode;
  children: ReactNode;
}
 
function Layout({ header, sidebar, children }: LayoutProps) {

Relacionado

• Render Props — Cuando los slots necesitan acceso al estado interno del componente
• Compound Components — Componentes de múltiples partes que comparten estado implícito
• Context Patterns — Evitar prop drilling en árboles profundamente compuestos

• Crea un único componente contenedor que anida todos los proveedores.
• Los consumidores solo ven <AppProviders> en el sitio de llamada.

• TypeScript infiere T del array items y lo aplica en renderItem.
• El consumidor obtiene autocompletado completo en la prop item dentro del componente de renderizado.

• Todas las props de slot están tipadas como ReactNode.
• children es una prop estándar de React que recibe JSX anidado.