Forem: Carlos m. Ruiz

Patrones de diseño de componentes de React: una guía completa

Carlos m. Ruiz — Mon, 23 Feb 2026 06:33:57 +0000

En este post exploraremos algunos de los patrones más utilizados al momento de construir componentes en React y cómo pueden ayudarte a desarrollar aplicaciones más escalables, mantenibles y fáciles de entender.

A lo largo de esta guía sobre Patrones de diseño de componentes de React: una guía completa, analizaremos diferentes enfoques que te permitirán estructurar mejor tu código, reutilizar lógica de manera eficiente y crear una mejorar estructura de tus componentes.

Compound Components

Concepto

El patrón de Compound Components permite que varios componentes trabajen juntos de manera coordinada, compartiendo estado implícitamente a través de React Context. En lugar de tener un solo componente monolítico con muchas props, este patrón divide la funcionalidad en componentes más pequeños que se componen juntos.

La característica principal es que estos componentes "compuestos" están diseñados para trabajar en conjunto y comparten estado interno sin necesidad de pasar props explícitamente entre ellos. El componente padre actúa como gestor del estado, mientras que los componentes hijos acceden a ese estado a través de Context.

Este patrón proporciona una API declarativa y flexible que resulta intuitiva de usar, ya que la estructura del JSX refleja naturalmente la jerarquía visual del componente.

Caso de uso

El patrón Compound Components es ideal cuando necesitas crear componentes que:

Tienen múltiples partes interconectadas que comparten estado
Requieren flexibilidad en cómo se organizan sus elementos internos
Necesitan proporcionar una API expresiva y fácil de entender
Deben mantener la lógica encapsulada pero permitir personalización en la presentación

Ejemplos típicos incluyen:

Tabs (Pestañas): Un componente de tabs tiene triggers (botones) y panels (contenido), todos deben conocer qué pestaña está activa.

Accordions (Acordeones): Los headers y contenidos deben coordinarse para mostrar/ocultar secciones.

Select/Dropdown: El trigger, menú e items deben trabajar juntos para manejar la selección.

Modals/Dialogs: El trigger, overlay, contenido y botones de cierre necesitan coordinar el estado de apertura.

Ejemplo con TypeScript

Vamos a construir un componente Tabs usando el patrón Compound Components. Dividiremos el ejemplo en archivos separados para una mejor organización:

TabsContext.tsx

import { createContext, useContext, ReactNode, useState } from 'react';

interface TabsContextValue {
  activeTab: string;
  setActiveTab: (value: string) => void;
}

const TabsContext = createContext<TabsContextValue | undefined>(undefined);

export function useTabsContext() {
  const context = useContext(TabsContext);

  if (!context) {
    throw new Error('Tabs compound components must be used within Tabs.Root');
  }

  return context;
}

interface TabsProviderProps {
  children: ReactNode;
  defaultValue: string;
}

export function TabsProvider({ children, defaultValue }: TabsProviderProps) {
  const [activeTab, setActiveTab] = useState(defaultValue);

  return (
    <TabsContext.Provider value={{ activeTab, setActiveTab }}>
      {children}
    </TabsContext.Provider>
  );
}

TabsRoot.tsx

import { ReactNode } from 'react';
import { TabsProvider } from './TabsContext';

interface TabsRootProps {
  children: ReactNode;
  defaultValue: string;
  className?: string;
}

export function TabsRoot({ children, defaultValue, className }: TabsRootProps) {
  return (
    <TabsProvider defaultValue={defaultValue}>
      <div className={className}>
        {children}
      </div>
    </TabsProvider>
  );
}

TabsList.tsx

import { ReactNode } from 'react';

interface TabsListProps {
  children: ReactNode;
  className?: string;
}

export function TabsList({ children, className }: TabsListProps) {
  return (
    <div role="tablist" className={className}>
      {children}
    </div>
  );
}

TabsTrigger.tsx

import { ReactNode } from 'react';
import { useTabsContext } from './TabsContext';

interface TabsTriggerProps {
  value: string;
  children: ReactNode;
  className?: string;
}

export function TabsTrigger({ value, children, className }: TabsTriggerProps) {
  const { activeTab, setActiveTab } = useTabsContext();
  const isActive = activeTab === value;

  return (
    <button
      role="tab"
      aria-selected={isActive}
      onClick={() => setActiveTab(value)}
      className={`${className} ${isActive ? 'active' : ''}`}
    >
      {children}
    </button>
  );
}

TabsContent.tsx

import { ReactNode } from 'react';
import { useTabsContext } from './TabsContext';

interface TabsContentProps {
  value: string;
  children: ReactNode;
  className?: string;
}

export function TabsContent({ value, children, className }: TabsContentProps) {
  const { activeTab } = useTabsContext();

  if (activeTab !== value) {
    return null;
  }

  return (
    <div role="tabpanel" className={className}>
      {children}
    </div>
  );
}

index.tsx

import { TabsRoot } from './TabsRoot';
import { TabsList } from './TabsList';
import { TabsTrigger } from './TabsTrigger';
import { TabsContent } from './TabsContent';

export const Tabs = {
  Root: TabsRoot,
  List: TabsList,
  Trigger: TabsTrigger,
  Content: TabsContent,
};

Uso del componente

import { Tabs } from './components/Tabs';

function App() {
  return (
    <Tabs.Root defaultValue="profile">
      <Tabs.List>
        <Tabs.Trigger value="profile">
          Perfil
        </Tabs.Trigger>
        <Tabs.Trigger value="settings">
          Configuración
        </Tabs.Trigger>
        <Tabs.Trigger value="notifications">
          Notificaciones
        </Tabs.Trigger>
      </Tabs.List>

      <Tabs.Content value="profile">
        <h2>Tu Perfil</h2>
        <p>Información de tu cuenta y preferencias personales.</p>
      </Tabs.Content>

      <Tabs.Content value="settings">
        <h2>Configuración</h2>
        <p>Ajusta las opciones de tu aplicación.</p>
      </Tabs.Content>

      <Tabs.Content value="notifications">
        <h2>Notificaciones</h2>
        <p>Gestiona tus alertas y notificaciones.</p>
      </Tabs.Content>
    </Tabs.Root>
  );
}

export default App;

Librerías que usan este patrón

Radix UI

Radix UI es una de las implementaciones más populares del patrón Compound Components. Esta librería proporciona componentes primitivos sin estilos que priorizan la accesibilidad y la flexibilidad.

Ejemplo real de Radix UI:

import * as Accordion from '@radix-ui/react-accordion';

function MyAccordion() {
  return (
    <Accordion.Root type="single" collapsible>
      <Accordion.Item value="item-1">
        <Accordion.Trigger>¿Qué es Radix UI?</Accordion.Trigger>
        <Accordion.Content>
          Una librería de componentes primitivos sin estilos.
        </Accordion.Content>
      </Accordion.Item>

      <Accordion.Item value="item-2">
        <Accordion.Trigger>¿Por qué usar Compound Components?</Accordion.Trigger>
        <Accordion.Content>
          Proporciona flexibilidad y una API expresiva.
        </Accordion.Content>
      </Accordion.Item>
    </Accordion.Root>
  );
}

Por qué Radix UI usa este patrón:

Permite máxima flexibilidad en cómo se estructura el markup
Cada parte del componente puede ser estilizada independientemente
Mantiene la accesibilidad incorporada sin forzar estructura rígida
Los desarrolladores tienen control total sobre el orden y anidamiento de elementos

Headless UI

Desarrollado por Tailwind Labs, Headless UI utiliza Compound Components para proporcionar componentes completamente funcionales sin estilos predefinidos.

Ejemplo con Headless UI:

import { Menu } from '@headlessui/react';

function MyMenu() {
  return (
    <Menu>
      <Menu.Button>Opciones</Menu.Button>
      <Menu.Items>
        <Menu.Item>
          {({ active }) => (
            <a className={active ? 'bg-blue-500' : ''} href="/account">
              Mi Cuenta
            </a>
          )}
        </Menu.Item>
        <Menu.Item>
          {({ active }) => (
            <a className={active ? 'bg-blue-500' : ''} href="/settings">
              Configuración
            </a>
          )}
        </Menu.Item>
      </Menu.Items>
    </Menu>
  );
}

Ventajas de este enfoque:

Integración perfecta con Tailwind CSS
Comportamiento y accesibilidad manejados internamente
Estilizado completamente bajo tu control
Transiciones y animaciones fáciles de implementar

Chakra UI

Chakra UI utiliza Compound Components para muchos de sus componentes complejos, combinándolo con un sistema de diseño completo.

import { Tabs, TabList, TabPanels, Tab, TabPanel } from '@chakra-ui/react';

function ChakraTabs() {
  return (
    <Tabs>
      <TabList>
        <Tab>Inicio</Tab>
        <Tab>Proyectos</Tab>
        <Tab>Contacto</Tab>
      </TabList>

      <TabPanels>
        <TabPanel>
          <p>Contenido de inicio</p>
        </TabPanel>
        <TabPanel>
          <p>Contenido de proyectos</p>
        </TabPanel>
        <TabPanel>
          <p>Contenido de contacto</p>
        </TabPanel>
      </TabPanels>
    </Tabs>
  );
}

Por qué funciona bien en Chakra:

Se integra con el sistema de theming
Props de estilo consistentes en todos los componentes
Componentes ya vienen con estilos base personalizables
Responsive design built-in

Reach UI

Reach UI fue uno de los pioneros en popularizar este patrón para componentes accesibles en React.

import { Tabs, TabList, Tab, TabPanels, TabPanel } from '@reach/ui/tabs';

function ReachTabs() {
  return (
    <Tabs>
      <TabList>
        <Tab>Uno</Tab>
        <Tab>Dos</Tab>
        <Tab>Tres</Tab>
      </TabList>

      <TabPanels>
        <TabPanel>
          <p>Panel uno</p>
        </TabPanel>
        <TabPanel>
          <p>Panel dos</p>
        </TabPanel>
        <TabPanel>
          <p>Panel tres</p>
        </TabPanel>
      </TabPanels>
    </Tabs>
  );
}

Ventajas del patrón

API expresiva y clara: La estructura del JSX comunica claramente la relación entre componentes.

Flexibilidad en la composición: Los usuarios pueden reordenar, anidar o condicionar los componentes según necesiten.

Encapsulación del estado: El estado se mantiene privado dentro del componente padre, sin contaminación del scope global.

Separación de responsabilidades: Cada sub-componente tiene una única responsabilidad clara.

Facilidad de testing: Los componentes individuales pueden testearse de manera aislada.

Desventajas a considerar

Complejidad de implementación: Requiere más código inicial que un componente simple con props.

Curva de aprendizaje: Los desarrolladores necesitan entender Context API y el patrón específico.

Posible overhead de performance: El Context puede causar re-renders si no se optimiza correctamente.

Dependencia de estructura: Los componentes deben usarse en una estructura específica, lo que puede resultar confuso si no está bien documentado.

Slot Pattern

Concepto

El patrón Slot permite crear componentes con áreas específicas personalizables donde se puede inyectar contenido arbitrario. A diferencia de simplemente usar children, los slots proporcionan múltiples puntos de inyección nombrados, cada uno con un propósito específico dentro de la estructura del componente.

Este patrón trata los diferentes elementos de un componente como "ranuras" (slots) que pueden ser rellenadas con contenido personalizado. Cada slot representa una sección específica del componente con una ubicación y propósito definido, permitiendo una personalización estructural sin comprometer la lógica interna del componente.

La implementación más común del patrón Slot en React se realiza a través de props específicas para cada sección del componente. Por ejemplo, un componente Card puede tener slots para header, footer, media y actions, cada uno representando una sección distinta de la tarjeta.

Caso de uso

El patrón Slot es especialmente útil cuando necesitas:

Layouts flexibles: Componentes que requieren múltiples áreas personalizables con posiciones específicas. Por ejemplo, un layout de dashboard con header, sidebar, main content y footer, donde cada sección puede contener diferentes componentes según la página.

Componentes con estructura fija pero contenido variable: Cuando tienes un componente con una estructura visual consistente pero el contenido de cada sección varía. Las cards son un ejemplo perfecto, ya que siempre tienen las mismas secciones (header, body, footer) pero el contenido cambia.

Personalización sin perder consistencia: Cuando quieres permitir personalización manteniendo una estructura visual coherente en toda la aplicación. Los slots aseguran que ciertas áreas permanezcan en posiciones específicas.

Composición de componentes complejos: Para construir componentes que combinan múltiples elementos en posiciones específicas, como modals con header, body y footer, o navigation bars con logo, menú y acciones de usuario.

Ejemplos específicos incluyen:

Cards de productos: Con secciones para imagen, título, descripción, precio y acciones de compra.

Dialogs/Modals: Con header (título y botón cerrar), content (cuerpo del modal) y actions (botones de confirmación/cancelación).

Navigation Bars: Con slots para logo, menú principal, búsqueda y acciones de usuario.

Page Layouts: Con slots para header, sidebar, main content, y footer.

Ejemplo con TypeScript

Vamos a construir un componente Card flexible usando el patrón Slot. Separamos la implementación en archivos para mayor claridad:

CardTypes.ts

import { ReactNode } from 'react';

export interface CardProps {
  header?: ReactNode;
  media?: ReactNode;
  footer?: ReactNode;
  actions?: ReactNode;
  children: ReactNode;
  variant?: 'default' | 'elevated' | 'outlined';
  className?: string;
}

Card.tsx

import { CardProps } from './CardTypes';
import './Card.css';

export function Card({
  header,
  media,
  footer,
  actions,
  children,
  variant = 'default',
  className = '',
}: CardProps) {
  return (
    <div className={`card card--${variant} ${className}`}>
      {media && <div className="card__media">{media}</div>}

      {header && <div className="card__header">{header}</div>}

      <div className="card__content">{children}</div>

      {actions && <div className="card__actions">{actions}</div>}

      {footer && <div className="card__footer">{footer}</div>}
    </div>
  );
}

ProductCard.tsx

import { Card } from './Card';

interface Product {
  id: string;
  name: string;
  price: number;
  originalPrice?: number;
  image: string;
  description: string;
  features: string[];
  badge?: string;
}

interface ProductCardProps {
  product: Product;
  onAddToCart: (productId: string) => void;
  onViewDetails: (productId: string) => void;
}

export function ProductCard({ 
  product, 
  onAddToCart, 
  onViewDetails 
}: ProductCardProps) {
  return (
    <Card
      variant="elevated"
      media={
        <div className="product-card__media-wrapper">
          <img 
            src={product.image} 
            alt={product.name}
            className="product-card__image"
          />
          {product.badge && (
            <span className="product-card__badge">
              {product.badge}
            </span>
          )}
        </div>
      }
      header={
        <div className="product-card__header">
          <h3 className="product-card__title">{product.name}</h3>
          <div className="product-card__price">
            {product.originalPrice && (
              <span className="product-card__price--original">
                ${product.originalPrice}
              </span>
            )}
            <span className="product-card__price--current">
              ${product.price}
            </span>
          </div>
        </div>
      }
      footer={
        <div className="product-card__footer">
          <span className="product-card__shipping">
            Envío gratis
          </span>
          <span className="product-card__stock">
            En stock
          </span>
        </div>
      }
      actions={
        <div className="product-card__actions">
          <button 
            onClick={() => onViewDetails(product.id)}
            className="button button--secondary"
          >
            Ver detalles
          </button>
          <button 
            onClick={() => onAddToCart(product.id)}
            className="button button--primary"
          >
            Agregar al carrito
          </button>
        </div>
      }
    >
      <p className="product-card__description">
        {product.description}
      </p>
      <ul className="product-card__features">
        {product.features.map((feature, index) => (
          <li key={index}>{feature}</li>
        ))}
      </ul>
    </Card>
  );
}

DashboardLayout.tsx

import { ReactNode } from 'react';

interface DashboardLayoutProps {
  header: ReactNode;
  sidebar: ReactNode;
  notifications?: ReactNode;
  children: ReactNode;
}

export function DashboardLayout({
  header,
  sidebar,
  notifications,
  children,
}: DashboardLayoutProps) {
  return (
    <div className="dashboard-layout">
      <header className="dashboard-layout__header">
        {header}
        {notifications && (
          <div className="dashboard-layout__notifications">
            {notifications}
          </div>
        )}
      </header>

      <div className="dashboard-layout__body">
        <aside className="dashboard-layout__sidebar">
          {sidebar}
        </aside>

        <main className="dashboard-layout__main">
          {children}
        </main>
      </div>
    </div>
  );
}

App.tsx

import { DashboardLayout } from './DashboardLayout';
import { ProductCard } from './ProductCard';

function App() {
  const product = {
    id: '1',
    name: 'Producto Premium',
    price: 79,
    originalPrice: 99,
    image: '/product.jpg',
    description: 'Descripción del producto con características increíbles.',
    features: [
      'Alta calidad',
      'Garantía extendida',
      'Soporte 24/7'
    ],
    badge: 'Nuevo'
  };

  return (
    <DashboardLayout
      header={
        <div className="header">
          <h1>Mi Dashboard</h1>
          <button>Cerrar sesión</button>
        </div>
      }
      sidebar={
        <nav>
          <ul>
            <li>Inicio</li>
            <li>Productos</li>
            <li>Configuración</li>
          </ul>
        </nav>
      }
      notifications={
        <div className="notification-badge">
          3 nuevas notificaciones
        </div>
      }
    >
      <div className="products-grid">
        <ProductCard
          product={product}
          onAddToCart={(id) => console.log('Añadido:', id)}
          onViewDetails={(id) => console.log('Ver:', id)}
        />
      </div>
    </DashboardLayout>
  );
}

export default App;

Librerías que usan este patrón

Material-UI (MUI)

Material-UI ha estandarizado el uso de slots a través de las props slots y slotProps en todos sus componentes. Este enfoque permite una personalización granular de cada parte del componente.

Ejemplo con el componente DatePicker:

import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { TextField } from '@mui/material';
import CalendarIcon from '@mui/icons-material/CalendarMonth';

function MyDatePicker() {
  return (
    <DatePicker
      slots={{
        openPickerIcon: CalendarIcon,
        textField: TextField,
      }}
      slotProps={{
        openPickerIcon: {
          color: 'primary',
        },
        textField: {
          variant: 'outlined',
          label: 'Seleccionar fecha',
        },
      }}
    />
  );
}

Ejemplo con el componente Card:

import { Card, CardContent, CardActions, CardHeader, CardMedia } from '@mui/material';
import Avatar from '@mui/material/Avatar';
import IconButton from '@mui/material/IconButton';
import MoreVertIcon from '@mui/icons-material/MoreVert';

function MUICard() {
  return (
    <Card>
      <CardHeader
        avatar={
          <Avatar sx={{ bgcolor: 'primary.main' }}>
            R
          </Avatar>
        }
        action={
          <IconButton>
            <MoreVertIcon />
          </IconButton>
        }
        title="Título de la tarjeta"
        subheader="Subtítulo"
      />

      <CardMedia
        component="img"
        height="200"
        image="/image.jpg"
        alt="Descripción"
      />

      <CardContent>
        <p>Contenido de la tarjeta</p>
      </CardContent>

      <CardActions>
        <button>Acción 1</button>
        <button>Acción 2</button>
      </CardActions>
    </Card>
  );
}

Por qué MUI usa este patrón:

Permite personalización completa de cada parte del componente
Mantiene la API consistente entre todos los componentes
Facilita el override de componentes internos
Proporciona type safety completo con TypeScript
Permite pasar props específicas a cada slot sin contaminar el componente principal

Next.js App Router

Next.js implementa slots de manera nativa en su sistema de routing a través de layouts y parallel routes. El patrón se utiliza extensivamente para la composición de páginas.

Ejemplo básico de layout:

// app/layout.tsx
interface RootLayoutProps {
  children: React.ReactNode;
}

export default function RootLayout({ children }: RootLayoutProps) {
  return (
    <html lang="es">
      <body>
        <header>
          <nav>Mi Aplicación</nav>
        </header>
        <main>{children}</main>
        <footer>Copyright 2026</footer>
      </body>
    </html>
  );
}

Ejemplo con parallel routes (slots nombrados):

// app/dashboard/layout.tsx
interface DashboardLayoutProps {
  children: React.ReactNode;
  analytics: React.ReactNode;  // slot @analytics
  team: React.ReactNode;        // slot @team
}

export default function DashboardLayout({
  children,
  analytics,
  team,
}: DashboardLayoutProps) {
  return (
    <div className="dashboard">
      <div className="dashboard__main">
        {children}
      </div>
      <aside className="dashboard__sidebar">
        <section className="dashboard__analytics">
          {analytics}
        </section>
        <section className="dashboard__team">
          {team}
        </section>
      </aside>
    </div>
  );
}

// app/dashboard/@analytics/page.tsx
export default function Analytics() {
  return (
    <div>
      <h2>Analíticas</h2>
      <p>Métricas del dashboard</p>
    </div>
  );
}

// app/dashboard/@team/page.tsx
export default function Team() {
  return (
    <div>
      <h2>Equipo</h2>
      <p>Información del equipo</p>
    </div>
  );
}

Ventajas del enfoque de Next.js:

Slots se mapean directamente a rutas del sistema de archivos
Permite renderizado paralelo de múltiples secciones
Mantiene la separación de concerns a nivel de routing
Facilita el streaming y loading states independientes
Type safety automático con TypeScript

Shadcn/ui

Shadcn/ui utiliza el patrón Slot de manera implícita en sus componentes, aprovechando la composición natural de React junto con Radix UI primitives.

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";

function ShadcnCard() {
  return (
    <Card className="w-[350px]">
      <CardHeader>
        <CardTitle>Crear proyecto</CardTitle>
        <CardDescription>
          Despliega tu nuevo proyecto en un solo click.
        </CardDescription>
      </CardHeader>

      <CardContent>
        <form>
          <div className="grid w-full items-center gap-4">
            <div className="flex flex-col space-y-1.5">
              <label htmlFor="name">Nombre</label>
              <input id="name" placeholder="Nombre del proyecto" />
            </div>
          </div>
        </form>
      </CardContent>

      <CardFooter className="flex justify-between">
        <Button variant="outline">Cancelar</Button>
        <Button>Desplegar</Button>
      </CardFooter>
    </Card>
  );
}

Por qué funciona en Shadcn/ui:

Componentes copiables y personalizables
Integración natural con Tailwind CSS
Composición clara y predecible
Fácil de entender y modificar

Ant Design

Ant Design utiliza una variación del patrón Slot a través de props específicas y componentes separados para cada sección.

import { Card, Avatar } from 'antd';
import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';

const { Meta } = Card;

function AntCard() {
  return (
    <Card
      style={{ width: 300 }}
      cover={
        <img
          alt="example"
          src="https://example.com/image.jpg"
        />
      }
      actions={[
        <SettingOutlined key="setting" />,
        <EditOutlined key="edit" />,
        <EllipsisOutlined key="ellipsis" />,
      ]}
    >
      <Meta
        avatar={<Avatar src="https://example.com/avatar.jpg" />}
        title="Card title"
        description="This is the description"
      />
    </Card>
  );
}

Características del enfoque de Ant Design:

Props específicas para slots comunes (cover, actions)
Subcomponentes para secciones complejas (Meta)
API consistente en toda la librería
Buena documentación de cada slot disponible

Ventajas del patrón

Flexibilidad estructural máxima: Los slots permiten personalizar completamente cada sección del componente sin modificar su implementación interna. Puedes cambiar el contenido de cualquier slot sin afectar a los demás.

API clara y autodocumentada: Los nombres de las props dejan claro qué contenido va en cada sección. Al ver header, footer, o actions, inmediatamente entiendes dónde se renderizará ese contenido.

No requiere Context API: A diferencia del patrón Compound Components, los slots no necesitan compartir estado implícitamente. Cada slot recibe su contenido directamente como prop, haciendo el flujo de datos más explícito y fácil de seguir.

Fácil de entender para desarrolladores: El patrón es intuitivo y no requiere conocer APIs especiales o patrones complejos. Si sabes usar props en React, sabes usar slots.

Composición explícita: La estructura del JSX muestra claramente qué contenido va en cada slot, sin magia ni abstracciones ocultas. Esto facilita el debugging y el mantenimiento.

Type safety natural: TypeScript puede inferir y validar fácilmente los tipos de cada slot, proporcionando autocompletado y detección de errores en tiempo de desarrollo.

Sin overhead de performance: No hay Context API, no hay re-renders innecesarios. Los slots son simplemente props que se renderizan en posiciones específicas.

Desventajas a considerar

Puede llevar a prop explosion: Componentes con muchos slots pueden terminar con una lista muy larga de props, lo que puede hacer el código verboso y difícil de mantener.

Verbosidad en algunos casos: Para componentes simples, usar múltiples props para slots puede ser más código del necesario comparado con simplemente usar children.

Menos "mágico" que otros patrones: No hay coordinación automática entre slots como en Compound Components. Si necesitas que los slots compartan estado, tendrás que manejarlo explícitamente.

Requiere planificación cuidadosa: Necesitas decidir desde el principio qué secciones serán slots. Añadir nuevos slots después puede romper la compatibilidad hacia atrás si no se hace como props opcionales.

No hay jerarquía implícita: A diferencia de Compound Components donde los sub-componentes conocen su contexto, los slots son completamente independientes. Esto puede ser una ventaja o desventaja según el caso de uso.

Puede confundir cuándo usar cada slot: Sin documentación clara, los usuarios del componente pueden no saber qué slot usar para su contenido o cuál es la diferencia entre slots similares.

Higher-Order Components (HOC)

Contexto histórico

Los Higher-Order Components fueron uno de los patrones más utilizados en React antes de la introducción de Hooks en 2019. Este patrón surgió como la solución oficial recomendada por el equipo de React para reemplazar los mixins, que fueron considerados problemáticos y eventualmente deprecados.

Durante varios años, los HOCs dominaron el ecosistema de React y fueron adoptados masivamente por librerías populares como Redux (con connect()), React Router (con withRouter), Apollo Client (con graphql()), y Material-UI (con withStyles y withTheme). Sin embargo, con la llegada de React Hooks, este patrón ha sido en gran medida reemplazado por custom hooks, que ofrecen una API más simple y menos propensa a errores.

Hoy en día, los HOCs son considerados un patrón legacy. Aunque siguen siendo válidos y funcionan perfectamente en React moderno, las librerías principales del ecosistema han migrado hacia hooks como su API recomendada. Por ejemplo, React Router removió completamente withRouter en su versión 6, Apollo Client deprecó sus HOCs en favor de hooks como useQuery y useMutation, y Redux recomienda usar useSelector y useDispatch en lugar de connect().

Concepto

Un Higher-Order Component es una función que recibe un componente como argumento y devuelve un nuevo componente con funcionalidad adicional. Es importante entender que un HOC no modifica el componente original, sino que lo compone envolviéndolo en un componente contenedor.

La firma básica de un HOC es:

function withSomething(Component: ComponentType): ComponentType

El HOC envuelve el componente original y puede:

Inyectar props adicionales
Agregar lógica de ciclo de vida
Modificar o interceptar props existentes
Manejar estado
Conectar con fuentes de datos externas

Es una aplicación del patrón de composición funcional aplicado a componentes React. El nombre viene de las funciones de orden superior (higher-order functions) en programación funcional, que son funciones que toman otras funciones como argumentos o las devuelven como resultado.

Caso de uso

Aunque los HOCs son legacy, todavía hay escenarios donde pueden ser útiles o necesarios:

Código legacy existente: Si tienes una aplicación grande construida con HOCs, puede no ser práctico refactorizar todo a hooks inmediatamente. Los HOCs seguirán funcionando perfectamente.

Componentes de clase que no se pueden migrar: Si por alguna razón necesitas mantener componentes de clase y no puedes usar hooks directamente, los HOCs siguen siendo una forma válida de compartir lógica.

Cross-cutting concerns transversales: Para funcionalidad que debe aplicarse consistentemente a múltiples componentes, como autenticación, logging, manejo de errores, o analytics.

Interoperabilidad con librerías antiguas: Cuando trabajas con librerías que todavía usan HOCs en su API pública.

Error Boundaries: Los Error Boundaries todavía requieren componentes de clase en React, por lo que un HOC puede ser una forma útil de agregar error handling a componentes funcionales.

Casos específicos donde los HOCs fueron comunes (antes de hooks):

Autenticación y autorización: Envolver componentes para verificar si el usuario está autenticado o tiene permisos específicos.

Conexión a stores: Como connect() de Redux para conectar componentes al estado global.

Routing: Como withRouter para inyectar props de navegación.

Theming: Para inyectar el tema actual en componentes.

Tracking y analytics: Para registrar automáticamente eventos cuando los componentes se montan o se interactúa con ellos.

Ejemplo con TypeScript

Vamos a construir varios HOCs útiles con TypeScript. Separamos cada HOC en su propio archivo:

withAuth.tsx

import { ComponentType, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';

interface AuthUser {
  id: string;
  name: string;
  email: string;
  roles: string[];
}

interface WithAuthProps {
  user: AuthUser;
}

interface WithAuthOptions {
  redirectTo?: string;
  requiredRoles?: string[];
  LoadingComponent?: ComponentType;
}

function useAuth() {
  // Simulación de hook de autenticación
  // En una app real, esto vendría de tu sistema de auth
  const user: AuthUser | null = {
    id: '1',
    name: 'John Doe',
    email: 'john@example.com',
    roles: ['user'],
  };
  const loading = false;

  return { user, loading };
}

export function withAuth<P extends WithAuthProps>(
  Component: ComponentType<P>,
  options: WithAuthOptions = {}
) {
  const {
    redirectTo = '/login',
    requiredRoles = [],
    LoadingComponent = () => <div>Loading...</div>,
  } = options;

  return function AuthenticatedComponent(
    props: Omit<P, keyof WithAuthProps>
  ) {
    const { user, loading } = useAuth();
    const navigate = useNavigate();

    useEffect(() => {
      if (!loading && !user) {
        navigate(redirectTo);
        return;
      }

      if (user && requiredRoles.length > 0) {
        const hasRequiredRole = requiredRoles.some((role) =>
          user.roles.includes(role)
        );

        if (!hasRequiredRole) {
          navigate('/unauthorized');
        }
      }
    }, [user, loading, navigate]);

    if (loading) {
      return <LoadingComponent />;
    }

    if (!user) {
      return null;
    }

    return <Component {...(props as P)} user={user} />;
  };
}

withErrorBoundary.tsx

import { Component, ComponentType, ErrorInfo, ReactNode } from 'react';

interface ErrorBoundaryState {
  hasError: boolean;
  error: Error | null;
}

interface ErrorFallbackProps {
  error: Error | null;
  resetError: () => void;
}

const DefaultErrorFallback = ({ error, resetError }: ErrorFallbackProps) => (
  <div style={{ padding: '20px', textAlign: 'center' }}>
    <h2>Something went wrong</h2>
    <details style={{ whiteSpace: 'pre-wrap' }}>
      {error?.message}
    </details>
    <button onClick={resetError}>Try again</button>
  </div>
);

export function withErrorBoundary<P extends object>(
  WrappedComponent: ComponentType<P>,
  ErrorFallback: ComponentType<ErrorFallbackProps> = DefaultErrorFallback
) {
  return class WithErrorBoundary extends Component<P, ErrorBoundaryState> {
    constructor(props: P) {
      super(props);
      this.state = { hasError: false, error: null };
    }

    static getDerivedStateFromError(error: Error): ErrorBoundaryState {
      return { hasError: true, error };
    }

    componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
      console.error('Error caught by boundary:', error, errorInfo);
      // Aquí podrías enviar el error a un servicio de logging
      // logErrorToService(error, errorInfo);
    }

    resetError = (): void => {
      this.setState({ hasError: false, error: null });
    };

    render(): ReactNode {
      if (this.state.hasError) {
        return (
          <ErrorFallback
            error={this.state.error}
            resetError={this.resetError}
          />
        );
      }

      return <WrappedComponent {...this.props} />;
    }
  };
}

withLoading.tsx

import { ComponentType } from 'react';

interface WithLoadingProps {
  isLoading: boolean;
}

interface LoadingComponentProps {
  message?: string;
}

const DefaultLoadingComponent = ({ message }: LoadingComponentProps) => (
  <div style={{ padding: '20px', textAlign: 'center' }}>
    <div>Loading{message ? `: ${message}` : '...'}</div>
  </div>
);

export function withLoading<P extends WithLoadingProps>(
  Component: ComponentType<P>,
  LoadingComponent: ComponentType<LoadingComponentProps> = DefaultLoadingComponent,
  loadingMessage?: string
) {
  return function WithLoadingComponent(props: P) {
    if (props.isLoading) {
      return <LoadingComponent message={loadingMessage} />;
    }

    return <Component {...props} />;
  };
}

withAnalytics.tsx

import { ComponentType, useEffect } from 'react';

interface AnalyticsEvent {
  eventName: string;
  properties?: Record<string, unknown>;
}

const analytics = {
  track: (event: AnalyticsEvent) => {
    console.log('Analytics event:', event);
    // En producción, esto enviaría datos a tu servicio de analytics
  },
};

export function withAnalytics<P extends object>(
  Component: ComponentType<P>,
  eventName: string,
  getProperties?: (props: P) => Record<string, unknown>
) {
  return function AnalyticsComponent(props: P) {
    useEffect(() => {
      analytics.track({
        eventName: `${eventName}_viewed`,
        properties: getProperties?.(props),
      });
    }, []);

    const handleClick = () => {
      analytics.track({
        eventName: `${eventName}_clicked`,
        properties: getProperties?.(props),
      });
    };

    return (
      <div onClick={handleClick}>
        <Component {...props} />
      </div>
    );
  };
}

compose.ts

import { ComponentType } from 'react';

export function compose<P>(...hocs: Array<(component: ComponentType<any>) => ComponentType<any>>) {
  return (component: ComponentType<P>) => {
    return hocs.reduceRight((acc, hoc) => hoc(acc), component);
  };
}

Usage Examples

import { withAuth } from './withAuth';
import { withErrorBoundary } from './withErrorBoundary';
import { withLoading } from './withLoading';
import { withAnalytics } from './withAnalytics';
import { compose } from './compose';

interface DashboardProps {
  user: {
    id: string;
    name: string;
    email: string;
  };
  isLoading: boolean;
}

function Dashboard({ user, isLoading }: DashboardProps) {
  return (
    <div>
      <h1>Dashboard</h1>
      <p>Welcome, {user.name}</p>
    </div>
  );
}

// Aplicar un solo HOC
export const ProtectedDashboard = withAuth(Dashboard, {
  requiredRoles: ['admin'],
});

// Aplicar múltiples HOCs manualmente
export const EnhancedDashboard = withErrorBoundary(
  withAuth(
    withLoading(Dashboard),
    { requiredRoles: ['admin'] }
  )
);

// Usar compose para aplicar múltiples HOCs de manera más legible
export const ComposedDashboard = compose<DashboardProps>(
  withErrorBoundary,
  (Component) => withAuth(Component, { requiredRoles: ['admin'] }),
  withLoading,
  (Component) => withAnalytics(Component, 'dashboard')
)(Dashboard);

Librerías que usan o usaban este patrón

React Redux

React Redux introdujo el HOC connect() como su API principal durante muchos años. Aunque todavía es compatible en la versión 8.x, el equipo recomienda usar hooks como el enfoque predeterminado.

Ejemplo legacy con connect:

import { connect } from 'react-redux';

interface StateProps {
  todos: Todo[];
  filter: string;
}

interface DispatchProps {
  addTodo: (text: string) => void;
  toggleTodo: (id: string) => void;
}

interface OwnProps {
  userId: string;
}

type TodoListProps = StateProps & DispatchProps & OwnProps;

function TodoList({ todos, filter, addTodo, toggleTodo }: TodoListProps) {
  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id} onClick={() => toggleTodo(todo.id)}>
          {todo.text}
        </li>
      ))}
    </ul>
  );
}

const mapStateToProps = (state: RootState, ownProps: OwnProps): StateProps => ({
  todos: state.todos.filter((t) => t.userId === ownProps.userId),
  filter: state.filter,
});

const mapDispatchToProps: DispatchProps = {
  addTodo,
  toggleTodo,
};

export default connect(mapStateToProps, mapDispatchToProps)(TodoList);

Enfoque moderno con hooks:

import { useSelector, useDispatch } from 'react-redux';

interface TodoListProps {
  userId: string;
}

function TodoList({ userId }: TodoListProps) {
  const todos = useSelector((state: RootState) =>
    state.todos.filter((t) => t.userId === userId)
  );
  const filter = useSelector((state: RootState) => state.filter);
  const dispatch = useDispatch();

  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id} onClick={() => dispatch(toggleTodo(todo.id))}>
          {todo.text}
        </li>
      ))}
    </ul>
  );
}

export default TodoList;

Estado actual: connect() sigue siendo soportado pero se recomienda usar hooks. El equipo de Redux declaró que los hooks son ahora la forma recomendada de interactuar con Redux.

React Router

React Router proporcionó withRouter para inyectar props de navegación en componentes. Este HOC fue completamente removido en React Router v6.

Ejemplo con withRouter (React Router v5):

import { withRouter, RouteComponentProps } from 'react-router-dom';

interface ProductDetailProps extends RouteComponentProps<{ id: string }> {
  // props adicionales
}

function ProductDetail({ match, history, location }: ProductDetailProps) {
  const productId = match.params.id;

  const handleBack = () => {
    history.push('/products');
  };

  return (
    <div>
      <h1>Product {productId}</h1>
      <button onClick={handleBack}>Back to products</button>
    </div>
  );
}

export default withRouter(ProductDetail);

Enfoque moderno (React Router v6):

import { useParams, useNavigate, useLocation } from 'react-router-dom';

function ProductDetail() {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const location = useLocation();

  const handleBack = () => {
    navigate('/products');
  };

  return (
    <div>
      <h1>Product {id}</h1>
      <button onClick={handleBack}>Back to products</button>
    </div>
  );
}

export default ProductDetail;

Estado actual: withRouter fue completamente removido en React Router v6. La librería ahora usa exclusivamente hooks.

Apollo Client

Apollo Client tenía el HOC graphql() como su API principal para ejecutar queries y mutations. Este fue deprecado en favor de hooks.

Ejemplo legacy con graphql HOC:

import { graphql, ChildProps } from '@apollo/react-hoc';
import gql from 'graphql-tag';

const GET_USERS = gql`
  query GetUsers {
    users {
      id
      name
      email
    }
  }
`;

interface User {
  id: string;
  name: string;
  email: string;
}

interface Response {
  users: User[];
}

type ChildComponentProps = ChildProps<{}, Response>;

function UserList({ data }: ChildComponentProps) {
  if (data?.loading) return <div>Loading...</div>;
  if (data?.error) return <div>Error: {data.error.message}</div>;

  return (
    <ul>
      {data?.users?.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

export default graphql<{}, Response>(GET_USERS)(UserList);

Enfoque moderno con hooks:

import { useQuery, gql } from '@apollo/client';

const GET_USERS = gql`
  query GetUsers {
    users {
      id
      name
      email
    }
  }
`;

interface User {
  id: string;
  name: string;
  email: string;
}

interface GetUsersData {
  users: User[];
}

function UserList() {
  const { data, loading, error } = useQuery<GetUsersData>(GET_USERS);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <ul>
      {data?.users?.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

export default UserList;

Estado actual: Los HOCs de Apollo fueron deprecados en Apollo Client 3 y movidos a paquetes separados. Se recomienda usar hooks exclusivamente.

Material-UI

Material-UI (ahora MUI) proporcionaba withStyles y withTheme para inyectar estilos y temas. Estos han sido reemplazados por hooks y el sistema sx.

Ejemplo legacy con withStyles:

import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core';

const styles = (theme: Theme) =>
  createStyles({
    root: {
      padding: theme.spacing(2),
      backgroundColor: theme.palette.primary.main,
    },
    title: {
      color: theme.palette.primary.contrastText,
    },
  });

interface CardProps extends WithStyles<typeof styles> {
  title: string;
}

function Card({ classes, title }: CardProps) {
  return (
    <div className={classes.root}>
      <h2 className={classes.title}>{title}</h2>
    </div>
  );
}

export default withStyles(styles)(Card);

Enfoque moderno con hooks y sx:

import { Box, Typography, useTheme } from '@mui/material';

interface CardProps {
  title: string;
}

function Card({ title }: CardProps) {
  const theme = useTheme();

  return (
    <Box
      sx={{
        padding: 2,
        backgroundColor: 'primary.main',
      }}
    >
      <Typography
        variant="h5"
        sx={{
          color: 'primary.contrastText',
        }}
      >
        {title}
      </Typography>
    </Box>
  );
}

export default Card;

Estado actual: withStyles y withTheme todavía funcionan pero se consideran legacy. MUI recomienda usar el sistema sx o styled components.

Ventajas del patrón

Reutilización de lógica cross-cutting: Permite extraer lógica común que se aplica a múltiples componentes sin duplicar código.

Composición funcional: Los HOCs se pueden componer fácilmente usando funciones como compose(), permitiendo aplicar múltiples capas de funcionalidad.

No modifica el componente original: El componente base permanece puro y sin modificar, lo que facilita el testing y el razonamiento sobre el código.

Separación de concerns: Mantiene la lógica de infraestructura (auth, logging, etc.) separada de la lógica de presentación.

Compatible con componentes de clase: A diferencia de hooks, los HOCs funcionan tanto con componentes funcionales como de clase.

Desventajas a considerar

Wrapper hell: Aplicar múltiples HOCs puede resultar en un árbol de componentes profundamente anidado que es difícil de debuggear y visualizar en React DevTools.

Props collision: Si múltiples HOCs intentan inyectar props con el mismo nombre, pueden sobrescribirse mutuamente causando bugs difíciles de rastrear.

Nombres genéricos en DevTools: Los componentes envueltos aparecen con nombres como WithAuth(WithLoading(Component)) que pueden ser confusos.

Props forwarding manual: Es necesario manualmente pasar todas las props que no son usadas por el HOC al componente envuelto, lo que puede ser propenso a errores.

Imposibilidad de usar hooks dentro del HOC tradicional: Los HOCs tradicionales basados en clases no pueden usar hooks de React, aunque los HOCs modernos implementados como funciones sí pueden.

Refs no se pasan automáticamente: Es necesario usar forwardRef explícitamente si quieres que las refs funcionen correctamente.

Curva de aprendizaje: Para desarrolladores nuevos, entender el concepto de HOCs y cómo funcionan puede ser confuso inicialmente.

Overhead de performance mínimo: Cada HOC agrega un componente adicional en el árbol, lo que puede tener un pequeño impacto en performance si se usan muchos HOCs anidados.# Higher-Order Components (HOC)

Contexto histórico

Concepto

La firma básica de un HOC es:

function withSomething(Component: ComponentType): ComponentType

El HOC envuelve el componente original y puede:

Inyectar props adicionales
Agregar lógica de ciclo de vida
Modificar o interceptar props existentes
Manejar estado
Conectar con fuentes de datos externas