🌀 Higher-Order Components (HOC) para reutilizar lógica

En React, un Higher-Order Component (HOC) es una técnica avanzada para reutilizar lógica entre componentes. Se trata de una función que recibe un componente como argumento y devuelve un nuevo componente con funcionalidades adicionales.

Es un patrón muy útil cuando necesitamos compartir comportamiento entre varios componentes sin duplicar código, especialmente antes de la aparición de los Hooks.

---

1️⃣ Estructura básica de un HOC

Un HOC no modifica el componente original, sino que lo envuelve dentro de otro que añade nueva lógica o props.

function withExtraInfo(WrappedComponent) {
  return function EnhancedComponent(props) {
    const extraData = "Información adicional desde el HOC";
    return <WrappedComponent {...props} extra={extraData} />;
  };
}
  

Ahora podemos usarlo para envolver cualquier componente:

function Usuario({ nombre, extra }) {
  return (
    <div>
      <h3>Hola, {nombre}</h3>
      <p>{extra}</p>
    </div>
  );
}

const UsuarioConInfo = withExtraInfo(Usuario);
  

Hola, Jorge

Información adicional desde el HOC

---

2️⃣ Añadiendo lógica reutilizable

Supongamos que queremos que varios componentes muestren un indicador de carga (loading) mientras se obtienen datos.

function withLoading(WrappedComponent) {
  return function EnhancedComponent({ isLoading, ...props }) {
    if (isLoading) return <p>⏳ Cargando datos...</p>;
    return <WrappedComponent {...props} />;
  };
}

function ListaUsuarios({ usuarios }) {
  return (
    <ul>
      {usuarios.map((u, i) => (
        <li key={i}>{u}</li>
      ))}
    </ul>
  );
}

const ListaConLoading = withLoading(ListaUsuarios);
  

⏳ Cargando datos...

El HOC muestra el estado de carga antes de renderizar el componente principal.

---

3️⃣ Reutilización en múltiples componentes

Los HOC permiten aplicar el mismo comportamiento (por ejemplo, control de autenticación, permisos o datos compartidos) a varios componentes de forma consistente.

function withAuth(WrappedComponent) {
  return function EnhancedComponent({ isAuthenticated, ...props }) {
    if (!isAuthenticated) {
      return <p style={{ color: "red" }}>🚫 Acceso denegado</p>;
    }
    return <WrappedComponent {...props} />;
  };
}

function PanelAdmin() {
  return <h3>Bienvenido al panel de administración</h3>;
}

const PanelProtegido = withAuth(PanelAdmin);
  

🚫 Acceso denegado

El HOC añade control de autenticación antes de renderizar el componente protegido.

---

4️⃣ Buenas prácticas con HOC

• ✅ Nombrar los HOC con el prefijo with (ejemplo: withAuth, withLoading).
• ✅ Mantenerlos puros: no modificar el componente recibido directamente.
• ✅ Evitar anidar demasiados HOC, ya que puede complicar la depuración.
• ✅ Usar Hooks cuando sea posible (son más modernos y legibles).

---

5️⃣ Resumen

Los Higher-Order Components son una poderosa técnica para reutilizar lógica de manera estructurada. Aunque los Hooks han reemplazado muchos casos de uso, los HOC siguen siendo útiles en ciertos patrones avanzados o librerías de terceros.

← Volver al índice