Componentes de Orden Superior vs Hooks en React: Comparación Práctica

Los componentes de orden superior (HOC, por sus siglas en inglés) en React son funciones que toman un componente como parámetro y devuelven otro componente. Este patrón permite agregar lógica o estilos adicionales a un componente, sin modificar su estructura interna. Con la introducción de los hooks en React, los HOCs han sido reemplazados en muchos casos, ya que los hooks permiten gestionar estados y lógica de una manera más directa y sencilla. En este ejercicio, exploraremos cómo construir un HOC básico para añadir un loader a un componente y luego compararemos esta implementación con su equivalente usando hooks para observar sus diferencias y beneficios.

¿Qué es un componente de orden superior?

• Un componente de orden superior es una función que toma un componente como argumento y devuelve otro componente modificado.
• Permite reutilizar lógica entre componentes sin alterar su estructura.
• Era común en React antes de la introducción de los hooks, para compartir lógica entre múltiples componentes.

¿Cómo implementamos un componente con un loader usando HOCs?

1. Creamos una función, withLoading, que recibe un componente como argumento.
2. Este HOC añadirá la lógica de “loading” al componente, mostrando un mensaje de “Cargando…” mientras los datos están en espera.
3. La función withLoading decidirá si muestra el loader o el contenido en función de un estado booleano isLoading.

function withLoading(Component) {
  return function WrappedComponent(props) {
    const { isLoading, ...rest } = props;
    return isLoading ? <p>Cargando...p> : <Component {...rest} />;
  };
}

¿Cómo usamos el HOC withLoading en nuestro componente?

• Aplicamos el HOC al componente deseado:

const TextComponent = ({ text }) => <p>{text}p>;
const TextWithLoading = withLoading(TextComponent);

• Para activar el loader, pasamos isLoading={true} como prop:

true} text="Este es el contenido cargado" />

¿Por qué los hooks han reemplazado en muchos casos a los HOCs?

• Los hooks simplifican la gestión de lógica compartida al permitir que el estado y otras funcionalidades sean reutilizadas directamente dentro del componente.
• Con los hooks, podemos crear una lógica similar sin envolver el componente en otra capa de función, lo que mejora la legibilidad y el rendimiento en algunos casos.

¿Cómo implementar la misma funcionalidad con hooks?

1. Utilizamos el hook useState para controlar el estado de isLoading.
2. Definimos el contenido a mostrar en función del estado, sin necesidad de un HOC.

const TextComponentWithHook = ({ text }) => {
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // Simulamos una carga de datos
    setTimeout(() => setIsLoading(false), 2000);
  }, []);

  return isLoading ? <p>Cargando...p> : <p>{text}p>;
};

• Aquí, el useEffect simula la espera de datos, activando el loader durante dos segundos antes de mostrar el contenido.

¿Cuándo conviene usar HOCs o hooks?

• HOCs: útiles cuando necesitamos reutilizar lógica en diferentes componentes sin introducir hooks en cada uno.
• Hooks: preferibles para lógica compleja en componentes individuales, ofreciendo una estructura más clara y eficiente.