Antes de hooks, la reutilización de lógica en React era complicada. Hoy, un custom hook es una función que encapsula estado, efectos y lógica. El resultado es código más limpio y testeable.
Un custom hook básico: encapsula estado y efectos
Un custom hook es una función que usa otros hooks (useState, useEffect, etc). Eso es. El nombre debe empezar con "use" para que React lo reconozca como hook.
El beneficio es que la lógica vive en un sitio, los componentes se mantienen simples y puedes testear la lógica sin testear componentes complejos.
- Un hook encapsula estado y lógica.
- Componentes que lo usan se mantienen simples.
- Fácil de testear aislado.
Patrones útiles: fetch, formularios, storage local
Un hook para fetching encapsula loading, error, data y el effect que dispara la petición. Un hook de formulario maneja estado de campos, validación y submit. Un hook de storage sincroniza estado local con localStorage.
Esos patrones aparecen en casi cada aplicación React. Extraerlos a hooks reutilizables evita repetición.
- Identifica el patrón que repites.
- Extrae a custom hook.
- Reutiliza con confianza.
Evita problemas comunes con hooks
El error más común es no respetar las reglas de hooks: no los llames condicionalmente, no dentro de loops o con timing variable. React confía en que se llamen en el mismo orden siempre.
Otro error es crear hooks que hacen demasiado. Un hook debería tener una responsabilidad clara.
- Llama hooks siempre, en el mismo orden.
- Un hook, una responsabilidad.
- Usa dependencies correctamente en useEffect.
Testing de custom hooks
Existen librerías como @testing-library/react para testear hooks. El patrón es renderizar un componente que usa el hook, luego disparar acciones y comprobar resultados.
Testear hooks es más fácil que testear componentes complejos porque no necesitas DOM.
Un custom hook bien escrito es más fácil de testear que un componente. Eso es una señal de que extrajiste correctamente.
Cuándo NO extraer a custom hook
No extraigas prematuramente. Si lo usas en un sitio, probablemente no merece un hook. Si lo usas en tres o cuatro sitios, ahí sí vale la pena.
El criterio es el mismo que para funciones normales: reutilización.