Los custom hooks en React te permiten encapsular lógica reutilizable y compartirla entre componentes sin envolverlos como lo haría un Higher Order Component. Si ya creaste un loader con HOC, vas a notar la diferencia al construir el mismo patrón con un hook propio: más limpio, más directo y sin capas extra de componentes.
Esta guía es para desarrolladores que ya trabajan con React y quieren entender cuándo usar un custom hook en lugar de un Higher Order Component, usando un ejemplo concreto: un componente de carga.
¿Qué es un custom hook y en qué se diferencia de un Higher Order Component?
Ambos patrones buscan reutilizar lógica, pero lo hacen de formas distintas. Y aquí viene lo interesante: no compiten, se complementan.
¿Qué es un custom hook en React? Es una función que empieza con la palabra use y encapsula lógica reutilizable, normalmente apoyada en hooks nativos como useState o useEffect. Cualquier componente puede consumirlo.
Un Higher Order Component envuelve un componente dentro de otro para inyectarle funcionalidades. Un custom hook, en cambio, expone un estado o una lógica que tú llamas desde dentro del componente que la necesita. El control queda del lado del componente hijo.
¿Cuándo conviene usar uno u otro?
- Usa un HOC cuando quieras envolver y modificar el render de un componente externo.
- Usa un custom hook cuando quieras compartir estado o lógica reactiva entre componentes [01:50].
- Usa ambos si tu app necesita composición visual y lógica reutilizable a la vez.
¿Cómo crear un custom hook useLoading en React paso a paso?
El ejemplo parte de un componente padre que renderiza un UserComponent, y este último decide si mostrar un texto de carga o el contenido real según el valor del hook.
Lo primero es crear la función. Por convención, debe iniciar con use para que React la reconozca como hook.
tsx
import { useState } from "react";
export const useLoading = (initialLoading: boolean = false) => {
const [isLoading, setIsLoading] = useState(initialLoading);
return { isLoading, setIsLoading };
};
Aquí pasa algo clave: el hook recibe un initialLoading de tipo boolean con valor por defecto false, declara un estado local con useState y retorna tanto el valor como su setter. Eso es todo lo que necesita un custom hook básico.
¿Por qué los custom hooks empiezan con use? Porque React usa esa convención para aplicar las reglas de los hooks y detectar errores en su uso, como llamarlos dentro de condicionales o ciclos.
¿Cómo consumir el custom hook desde un componente hijo?
Dentro de UserComponent traes el hook, defines la prop name mediante una interfaz tipada y decides qué renderizar según el estado.
tsx
type UserProps = {
name: string;
};
const UserComponent: React.FC<UserProps> = ({ name }) => {
const { isLoading, setIsLoading } = useLoading(false);
if (isLoading) {
return <p>loading...</p>;
}
return (
<>
<p>Hello {name}</p>
<button onClick={() => setIsLoading(true)}>Simulate loading</button>
</>
);
};
Fíjate en el detalle: al hook le pasas false por defecto para que, al montar el componente, veas el saludo Hello devCode. Cuando haces clic en el botón, setIsLoading(true) cambia el estado y el componente vuelve a renderizar mostrando loading.
¿Cómo se conecta con el componente padre?
El padre solo necesita pasar la prop name al hijo. La lógica de carga vive completa dentro del hook y del propio UserComponent.
tsx
<UserComponent name="devCode" />
No hay envoltorios, no hay funciones que devuelvan funciones. La lógica se inyecta desde dentro.
¿Por qué elegir un custom hook frente a un HOC para manejar loading?
La diferencia visual es sutil pero importante. Con el Higher Order Component, controlabas el loader pasando una prop isLoading con valor true o false desde fuera. Con el custom hook, el control vive en el componente que lo consume y se puede mutar con un botón, un fetch o cualquier evento interno [09:30].
Algunas ventajas concretas del enfoque con hooks:
- Menos jerarquía de componentes en el árbol de React.
- Lógica más fácil de testear de forma aislada.
- Reutilización directa en cualquier componente sin envolverlo.
- Tipado más limpio cuando trabajas con TypeScript.
El Higher Order Component sigue siendo útil para envolver y encapsular comportamiento visual. El custom hook brilla cuando lo que quieres compartir es estado y funciones que lo modifican.
¿Cuál se te hace más natural para manejar un loader: un HOC o un custom hook como useLoading? Cuéntame en los comentarios cuál usarías en tu próximo proyecto.
