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";
}
 
function Card({ media, actions, children, variant = "outlined" }: CardProps) {
  const base = "rounded-lg overflow-hidden";
  const styles = variant === "elevated"
    ? `${base} shadow-lg bg-white`
    : `${base} border border-gray-200 bg-white`;
 
  return (
    <div className={styles}>
      {media && <div className="aspect-video overflow-hidden">{media}</div>}
      <div className="p-4">{children}</div>
      {actions && (
        <div className="px-4 pb-4 flex gap-2 justify-end">{actions}</div>
      )}
    </div>
  );
}
 
// Especialización mediante composición, NO herencia
function ProductCard({ product }: { product: Product }) {
  return (
    <Card
      variant="elevated"
      media={<img src={product.image} alt={product.name} />}
      actions={
        <>
          <button className="btn-secondary">Guardar</button>
          <button className="btn-primary">Añadir al carrito</button>
        </>
      }
    >
      <h3 className="font-semibold">{product.name}</h3>
      <p className="text-gray-600">${product.price}</p>
    </Card>
  );
}
 
interface Product {
  name: string;
  price: number;
  image: string;
}

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 }: ListProps<T>) {
  return (
    <ul>
      {items.map((item, i) => (
        <li key={i}><Item item={item} /></li>
      ))}
    </ul>
  );
}

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

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

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>
      </AuthProvider>
    </ThemeProvider>
  );
}

interface ListProps<T> {
  items: T[];
  renderItem: React.ComponentType<{ item: T }>;
}
 
function List<T>({ items, renderItem: Item }: ListProps<T>) {
  return <ul>{items.map((item, i) => <li key={i}><Item item={item} /></li>)}</ul>;
}

interface LayoutProps {
  header: ReactNode;
  sidebar: ReactNode;
  children: ReactNode;
}
 
function Layout({ header, sidebar, children }: LayoutProps) {
  return (
    <div>
      <header>{header}</header>
      <aside>{sidebar}</aside>
      <main>{children}</main>
    </div>
  );
}

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