Patrones de hooks en React para lógica reutilizable
Cómo extraer lógica a hooks personalizados sin acabar con un árbol de abstracciones difícil de mantener.
Cuándo merece la pena un hook
Un hook personalizado tiene sentido cuando la misma combinación de estado, efectos y lógica aparece en dos o más componentes, o cuando un componente empieza a mezclar responsabilidades que se entienden mejor por separado.
Extraer un hook por una sola línea de código solo añade indirección. Antes de crear uno, conviene preguntarse qué problema concreto resuelve y cómo se llamaría ese problema en una frase.
Un hook, una responsabilidad
Los buenos hooks tienen un nombre que describe lo que hacen: useDebounce, useLocalStorage, useOnClickOutside. Si el nombre necesita la palabra "y", probablemente son dos hooks.
Devuelve valores estables y fáciles de consumir, y deja los efectos secundarios dentro del hook, con su limpieza (return de useEffect) bien definida.
Errores habituales
El fallo más frecuente es omitir dependencias en useEffect para "evitar un bucle". Casi siempre el bucle viene de un objeto o función recreado en cada render; la solución es estabilizar esa referencia o mover el cálculo dentro del efecto, no silenciar la regla.
Activa eslint-plugin-react-hooks y trata sus avisos como errores de diseño, no como ruido.