React es una de las librerías más populares del frontend moderno, y desde la versión 16.8.0 incorpora oficialmente los hooks.
¿Qué son los hooks?
Los hooks son funciones usadas por componentes para extraer responsabilidades que de otro modo quedarían embebidas en el propio componente. Solo pueden ser usadas por functional components y, por convención, suelen empezar por el prefijo use.
React ofrece hooks base como useState, useEffect o useContext, pero además podemos construir hooks propios para encapsular lógica reutilizable.
¿Cómo se usan?
Un caso típico es encapsular la lógica de carga de un perfil desde una API. En lugar de repetir el mismo manejo de loading, profile y error en varios componentes, podemos extraerlo a un hook como useProfile(repository).
Ese hook puede devolver:
- el estado de carga,
- el perfil obtenido,
- el posible error,
- y una función como
getProfilepara ejecutar la acción.
Así el componente se simplifica y pasa a centrarse en pintar el estado, no en mantener toda la lógica interna.
Testing
¿Es necesario testear un hook? Depende. Si la funcionalidad ya queda bien cubierta a través del test del componente consumidor, quizá no sea necesario. Pero cuando el hook encapsula lógica relevante o se desarrolla de forma más autónoma, sí puede resultar interesante probarlo de forma aislada.
Para ello, una opción útil es @testing-library/react-hooks, que permite montar el hook, ejecutar acciones y comprobar cómo evoluciona su estado.
El patrón básico es:
- falsear el
repository, - montar el hook con
renderHook, - ejecutar la acción dentro de
act, - y verificar el estado final.
Conclusión
Los custom hooks ayudan a perder el miedo a extraer lógica de los componentes y facilitan construir código más reusable y más sencillo de probar. También permiten ir un paso más allá en escenarios como compartir estado mediante componentes superiores o contextos.