Entendiendo los componentes de orden superior en React con ejemplos

Los componentes de orden superior (HOCs, por sus siglas en inglés) son un patrón en React que puede resultar confuso al principio, pero una vez comprendido, se convierten en una herramienta valiosa para abstraer y reutilizar la lógica de componentes. En esta guía, aprenderás qué son los HOCs, cómo usarlos y cuándo tienen sentido — con ejemplos claros a lo largo del camino.

¿Qué es un componente de orden superior?

Un componente de orden superior es una función que toma un componente y devuelve un nuevo componente. Añade comportamiento, props o lógica al componente original — sin modificarlo directamente.

Estructura básica

const withExtraLogic = (Component) => {
  return function WrappedComponent(props) {
    // Añadir comportamiento personalizado aquí
    return <Component {...props} />;
  };
};

Piénsalo como un decorador: envuelves algo y lo mejoras antes de pasarlo.

¿Por qué usar un HOC?

• Reutilización de código: Abstrae lógica repetida
• Preocupaciones transversales: Registro, autenticación, seguimiento
• Inyección de props: Inyecta props basadas en lógica sin sobrecargar los componentes internos

Ejemplo básico: withLogger

const withLogger = (Component) => {
  return function WrappedComponent(props) {
    useEffect(() => {
      console.log('Montado:', Component.name);
    }, []);
    return <Component {...props} />;
  };
};

const Hello = () => <h1>Hello</h1>;
const LoggedHello = withLogger(Hello);

// Uso
<LoggedHello />

Esto registra el nombre del componente cuando se monta — sin tocar el componente original Hello.

Otro caso de uso: withWindowWidth

Este HOC añade el ancho de la ventana como prop a cualquier componente:

const withWindowWidth = (Component) => {
  return function WrappedComponent(props) {
    const [width, setWidth] = useState(window.innerWidth);

    useEffect(() => {
      const handleResize = () => setWidth(window.innerWidth);
      window.addEventListener('resize', handleResize);
      return () => window.removeEventListener('resize', handleResize);
    }, []);

    return <Component {...props} windowWidth={width} />;
  };
};

const DisplayWidth = ({ windowWidth }) => <p>Width: {windowWidth}px</p>;

const ResponsiveDisplay = withWindowWidth(DisplayWidth);

Esto te permite crear un componente responsivo sin duplicar la lógica de redimensionamiento.

HOCs vs hooks vs render props

Patrón Descripción Usar cuando… HOC Función que devuelve un nuevo componente Quieres añadir comportamiento a muchos componentes Hook Función reutilizable usando use* Quieres lógica con estado reutilizable Render props Pasar una función como hijo Quieres renderizado dinámico mediante función

Comparación en profundidad con hooks

Los hooks son preferidos para compartir lógica hoy en día, pero hay diferencias:

• Los HOCs son envoltorios externos. Los hooks se ejecutan dentro del componente.
• Los hooks ofrecen componibilidad — puedes llamar a múltiples hooks en un componente fácilmente.
• Los hooks funcionan con refs y estado local naturalmente, mientras que los HOCs necesitan cuidado especial para el reenvío de ref.

Misma lógica, implementación diferente

Usando un hook en lugar de withWindowWidth:

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return width;
}

const DisplayWidth = () => {
  const width = useWindowWidth();
  return <p>Width: {width}px</p>;
};

Esta versión evita el envoltorio adicional y es más legible en React moderno.

Limitaciones de los HOCs

• Anidamiento de envoltorios: Demasiados HOCs pueden hacer que el árbol de componentes sea difícil de depurar
• Nomenclatura: Los componentes envueltos anónimos dificultan la lectura en las DevTools
• Reenvío de refs: Las refs estándar no funcionan a menos que uses forwardRef

Ejemplo de problema con ref

const withWrapper = (Component) => (props) => <Component {...props} />;
const FancyInput = forwardRef((props, ref) => <input ref={ref} {...props} />);

Sin forwardRef, ref apuntaría al envoltorio, no al input real.

Mejores prácticas

• Siempre pasa las props: <Component {...props} />
• Nombra tus componentes envueltos para depuración:

WrappedComponent.displayName = `withLogger(${Component.displayName || Component.name})`;

• Evita los HOCs cuando los hooks pueden hacer el trabajo de manera más clara

Conclusión

Los componentes de orden superior son una forma flexible de extender y reutilizar la lógica de componentes. Aunque los hooks son más comunes en React moderno, los HOCs todavía tienen su lugar — especialmente cuando quieres añadir lógica alrededor de componentes existentes sin cambiar sus partes internas. Úsalos cuando hagan tu código más claro, no más complejo.

Preguntas frecuentes