Cómo crear un Higher Order Component con TypeScript

Resumen

Aprende a crear un high order component en React con TypeScript para mostrar un loader condicional. Verás cómo una función recibe un componente y devuelve otro, cómo tipar props genéricas con T y por qué, con la llegada de los hooks, este patrón se usa menos. Todo con un ejemplo claro: withLoading.

¿Qué es un high order component en React y para qué sirve?

Un high order component es una función que recibe un componente y devuelve otro componente. En React se usa para inyectar información, estilos o lógica de forma reutilizable. Aquí se aplica para mostrar un texto con loader según una prop booleana llamada isLoading.

Recibe un componente y retorna un componente envuelto con lógica extra.
Controla un loader con la prop booleana isLoading.
No hay llamada a API real: el estado se pone manualmente en true o false.
Separa responsabilidades: el HOC maneja el loading, el componente hijo renderiza el contenido.
Nota de contexto: hoy este patrón se usa menos por hooks y custom hooks.

¿Cómo implementar withLoading con TypeScript y props genéricas?

La clave es tipar el HOC con un genérico T para aceptar cualquier conjunto de props adicionales, y exigir que isLoading sea un booleano. Así el HOC es flexible y seguro.

T extiende de object para aceptar cualquier forma de props.
isLoading es estrictamente booleano: controla el loader.
Las demás props se pasan al componente original.
Se usa React.ComponentType para aceptar componentes funcionales o de clase.
El cast ayuda a preservar el tipo de las props originales.

¿Qué resuelve el tipado genérico T?

HOC reutilizable con distintos componentes y props.
Previene errores de tipos al pasar props no esperadas.
Mantiene la intelisense de TypeScript en componentes envueltos.

¿Cómo usar el HOC con un componente de usuario?

Primero se define un componente que recibe un nombre. Luego se envuelve con withLoading y se renderiza variando isLoading.

Con isLoading en true: muestra “Loading...”.
Con isLoading en false: renderiza el componente con “Hello, DevCode!”.
El HOC centraliza el comportamiento del loader y evita duplicar lógica.

¿Ya lo probaste? Comparte en comentarios cómo quedó tu withLoading y cuéntame si has usado high order components o si prefieres custom hooks para esta lógica.

Mariana Valencia Gallego

student•

Me hubiera gustado que aparte del código se hubiera explicado un caso o uso en la vida real donde HOC fuera la opción óptima en vez de cualquier otro patrón.

Es uno de los grandes problemas que a veces enfrento, hay muchos tools pero los pocos usados como este que tienen sus momentos donde realmente brillan, no sé cuándo usarlos

Juan Camilo Noreña López

student•

Los High-OrderComponents son útiles en proyectos con componentes de clase o para encapsular lógica repetitiva, como autenticación o permisos. Sin embargo, pueden generar jerarquías profundas de componentes ("nesting hell").
Los Hooks son ideales para proyectos modernos con componentes funcionales. Con useState, useEffect y custom hooks, puedes manejar estados y lógica de forma más clara y modular.

En resumen, si estás trabajando en React moderno, los Hooks son la mejor opción. Pero si tienes código legado o trabajas con clases, los HOCs siguen siendo una herramienta válida.

Richard Espinoza

student•

Otro uso comun que le podemos dar a los High-Order Components es la gestión de autenticación.

En este caso queremos que un HOC envuelva cualquier componente y verifique si el usuario está autenticado, y si no, enviarlo al Login.

// HOC para proteger rutas
const withAuth = (WrappedComponent) => {
  return (props) => {
    const isAuthenticated = !!localStorage.getItem("token"); // Simulación de autenticación

    return isAuthenticated ? (
      <WrappedComponent {...props} />
    ) : (
      <Navigate to="/login" />
    );
  };
};

// Componente normal (Dashboard)
const Dashboard = () => {
  return <h2>Bienvenido al Dashboard</h2>;
};

// Componente protegido
const ProtectedDashboard = withAuth(Dashboard);
```Este es uno de los usos mas comunes, espero les sirva de ayuda.

Isaías Chávez Martínez

student•

Si es correcto, creo es el ejemplo más sencillo de esto y el úso más común, actualmente me imagino se implementan patrones mejores. Pero esto era muy común, que bueno que me estoy actualizando.

Jose Luis Bedoya

student•

nunca he implementado HOCs! y estoy muy feliz por eso

Isaías Chávez Martínez

student•

A pesar de muchos decir que no son muy utilizados, yo me los he encontrado en varias entrevistas.

tb6292

student•

Para los que quieren ejemplos reales, la única vez que implemente HOCS fue para implementar error boundary, ya que el proyecto estaba en componentes de clases. Básicamente envolvia los componentes que quería capturar un error y si lo capturaba mostraba un ErrorPage y si no el componente que se pasaba por props.

// HOC para proteger rutas
const withAuth = (WrappedComponent) => {
  return (props) => {
    const isAuthenticated = !!localStorage.getItem("token"); // Simulación de autenticación

    return isAuthenticated ? (
      <WrappedComponent {...props} />
    ) : (
      <Navigate to="/login" />
    );
  };
};

// Componente normal (Dashboard)
const Dashboard = () => {
  return <h2>Bienvenido al Dashboard</h2>;
};

// Componente protegido
const ProtectedDashboard = withAuth(Dashboard);
```Este es uno de los usos mas comunes, espero les sirva de ayuda.

Cómo crear un Higher Order Component con TypeScript

Patrones de renderizado y composición

React Memo: cuándo optimizar componentes

Render Props y Composición en React: Ventajas y Desventajas

Control de Props en React: Comunicación entre Componentes Padres e Hijos

Patrón Compound Components en React: Creación de un Componente de Tabs