Aprende a diferenciar cómo y cuándo usar un Custom Hook frente a un High Order Component en React, creando un estado de loading reutilizable y claro. Verás cómo encapsular la lógica en un hook simple que cualquier componente puede consumir sin necesidad de envolverlo.
¿Qué diferencia a un custom hook de un high order component en React?
Un High Order Component envuelve o encapsula un componente dentro de otro para inyectarle funcionalidades. Un Custom Hook crea una funcionalidad basada en estado que puede ser usada por cualquier componente sin modificar su jerarquía.
- Patrón HOC: envuelve un componente y aporta lógica interna compartida.
- Patrón Hook: expone estado y funciones para reutilizar lógica sin envolver componentes.
- En el ejemplo se replica el loader que antes se hizo con un HOC, pero ahora con un hook para simplificar la adopción de la lógica de carga.
¿Cómo se construye el hook useLoading paso a paso?
La idea es iniciar un estado local con un booleano y exponerlo junto a su setter. Debe empezar con la palabra “use” para identificarlo como hook.
import { useState } from 'react';
export function useLoading(initialLoading: boolean = false) {
const [isLoading, setIsLoading] = useState<boolean>(initialLoading);
return { isLoading, setIsLoading };
}
- Nombre que inicia con “use” para indicar hook.
- Parámetro inicial booleano con valor por defecto en false.
- Estado local con useState que maneja isLoading y setIsLoading.
- Retorno del estado y su actualizador para usar en cualquier componente.
¿Cómo usar useLoading en UserComponent para controlar el loading?
Se consume el hook en un componente hijo para hacer render condicional y permitir que un botón cambie el estado de carga. Además, se tipa la prop de nombre.
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>
</>
);
};
// Uso en un componente padre
<UserComponent name="DevCode" />
- Render condicional: si isLoading es true, muestra “loading”. Si no, muestra “Hello {name}”.
- Interacción: el botón ejecuta onClick y llama a setIsLoading(true) para simular la carga.
- Tipado: interfaz UserProps con
name: string y uso de React.FunctionalComponent.
- Diferencia práctica frente a HOC: antes se pasaba una prop booleana desde el envoltorio. Aquí el componente controla su estado vía hook y es más directo de reutilizar.
¿Con cuál patrón te quedas para este escenario de loading? Comenta tu preferido y por qué.
