Recientemente, me encontré con una publicación titulada "¿Why now devs use custom hooks instead services in React? (perspective of pre-hooks React developer). La perspectiva presentada me pareció bastante intrigante. El autor comenta cómo los desarrolladores que comenzaron su viaje directamente con React tienden a depender en gran medida de custom hooks para diversas funcionalidades o servicios.
Inicialmente, pensé que esta perspectiva podría ser subjetiva o limitada a los desarrolladores dentro del círculo del autor. Sin embargo, llegue a explorar esto más a fondo en Reddit, donde encontré otra publicación que planteaba "Cuando es recomendable utilizar custom hooks". Para mi sorpresa, la mayoría de las opiniones fueron que siempre se debería utilizar.
Así que me pareció un tema muy interesante del que investigar, ademas de agregar ciertas opiniones personales y recomendaciones.
Primero que nada, ¿Cuál es la recomendación de React?
Los Custom Hooks en React son funciones JavaScript que siguen una convención de nombre específica: deben comenzar con "use" (por ejemplo, useEffect, useState). Estas funciones permiten encapsular lógica compleja y reutilizable en componentes de React. Según la documentación oficial de React, los Custom Hooks están diseñados para compartir lógica entre componentes de React sin la necesidad de copiar y pegar código.
Cuando se trata de utilizar Custom Hooks, React sugiere seguir algunas prácticas recomendadas:
**1. Convención de Nombres: **Los Custom Hooks deben comenzar con la palabra "use" para que React pueda identificarlos y aplicar ciertas optimizaciones.
2. Extraer Lógica Reutilizable: Utiliza Custom Hooks para extraer lógica que se repite en múltiples componentes. Esto ayuda a mantener un código más limpio y modular.
**3. No Introducir Estado Global: **Evita introducir estado global en Custom Hooks, ya que esto puede complicar la gestión del estado y llevar a efectos secundarios inesperados.
Entonces, ¿Cuando se recomienda utilizar Custom Hooks?
Entonces una vez definido lo que es un custom hook podemos empezar a definir puntos claves y escenarios en los que podemos utilizarlos:
1. Abstracción: Cuando la lógica de un componente se vuelve demasiado compleja, extraerla en un custom hook puede mejorar la legibilidad y el mantenimiento. Al abstraer los detalles de implementación, los custom hooks permiten que los componentes se centren en sus responsabilidades principales, promoviendo una separación más clara de las preocupaciones. Por otro lado, no siempre es necesario o beneficioso utilizarlos.
Ejemplo de cuando usar custom hooks: ✅
Supongamos que tenemos un componente UserList que muestra una lista de usuarios y realiza una llamada a una API para obtener los datos. La lógica de obtener los datos y manejar posibles errores se ha vuelto demasiado compleja y queremos abstraerla en un Custom Hook llamado useFetchUsers.
Ejemplo de cuando no es necesario usar un custom hook: ❌
Supongamos que tenemos un componente LoginForm que maneja la autenticación de usuarios. La lógica de validación de datos y el manejo del estado del formulario se manejan fácilmente dentro del propio componente, y no hay necesidad de extraerla en un Custom Hook.
En este caso, la lógica del formulario de inicio de sesión es lo suficientemente simple como para ser manejada dentro del componente LoginForm sin la necesidad de utilizar un Custom Hook. La abstracción adicional podría introducir complejidad innecesaria y hacer que el código sea menos claro y mantenible.
2. Lógica repetitiva: Debería de considerarse el uso de custom hooks cuando se observe que la lógica se repite en varios componentes. Esta es una oportunidad perfecta para escribir un custom hook que encapsule esa lógica, haciendo que su código sea DRY (Don't Repeat Yourself) y más fácil de mantener.
Ejemplo de cuando usar custom hooks: ✅
Supongamos que tenemos dos componentes CounterA y CounterB que comparten la lógica para manejar el estado de un contador. La lógica de incremento, decremento y reinicio del contador se repite en ambos componentes. Es una oportunidad perfecta para crear un Custom Hook llamado useCounter que encapsule esta lógica.
Ejemplo de cuando no es necesario usar un custom hook: ❌
Supongamos que tenemos dos componentes ProductList y Cart que muestran una lista de productos y un carrito de compras, respectivamente. Cada componente tiene una función fetchData que realiza una llamada a la API para obtener datos. Aunque la lógica de llamada a la API es similar en ambos componentes, no es necesario encapsularla en un Custom Hook, ya que la implementación de cada llamada puede diferir según el contexto.
3. Compartir lógica entre componentes: Los custom hooks facilitan el intercambio de lógica entre componentes no relacionados. Esto es particularmente útil para implementar cuestiones transversales como la autenticación, la tematización o la internacionalización, asegurando la coherencia en toda la aplicación.
Ejemplo de cuando usar custom hooks: ✅
Supongamos que tenemos un componente Header que muestra un botón de inicio de sesión y un componente Sidebar que muestra el nombre de usuario una vez que el usuario ha iniciado sesión. Ambos componentes necesitan acceder al estado de autenticación y a las funciones para iniciar y cerrar sesión.
En este ejemplo, el Custom Hook useAuth encapsula la lógica de autenticación, permitiendo que los componentes Header y Sidebar compartan fácilmente la misma lógica sin acoplamiento directo.
Ejemplo de cuando no es necesario usar un custom hook: ❌
Supongamos que tenemos un componente Form que maneja la lógica de un formulario de registro de usuarios. La lógica específica del formulario, como la validación de campos y el envío de datos, es única para este componente y no se comparte con otros componentes en la aplicación.
En este caso, la lógica específica del formulario está completamente contenida dentro del componente Form. No hay necesidad de extraer esta lógica en un Custom Hook ya que no se comparte con otros componentes y no se beneficiaría de su reutilización. Mantener la lógica dentro del componente hace que el código sea más claro y mantenible en este contexto.
⚠️ Usar custom hooks con cautela ⚠️ Recomendaciones Personales
Ciertos puntos que recomiendo a tener en cuenta cuando se este trabajando con custom hooks:
1. Optimización prematura: Importante resistir la tentación de crear custom hooks para cada pieza de lógica. La optimización prematura puede generar complejidad y abstracción innecesarias, lo que dificulta la comprensión y el mantenimiento del código. En lugar de ello, hay que favorecer a la simplicidad y la claridad hasta que los patrones de repetición surjan orgánicamente.
**2. Lógica específica del componente: **No toda la lógica garantiza la extracción en un custom hook. Si una parte de la lógica está estrechamente relacionada con un componente específico y es poco probable que se reutilice en otro lugar, puede ser más apropiado mantenerla dentro del propio componente, evitando abstracciones innecesarias.
3. Custom hooks demasiado abstractos: Los custom hooks demasiado abstractos con demasiadas responsabilidades pueden volverse difíciles de manejar y de entender. Habrá que a apuntar a logica de responsabilidad única que encapsule inquietudes específicas, promoviendo la claridad y la Componentización.
Pensamientos Finales
Ahora que hemos revisado todos estos ejemplos, espero que esta vez si puedas elegir entre si es un caso valido para poder usar custom hooks o no, centrándonos en su propósito inicial de abstracción y reutilización de código.
No podemos quitar que los Custom Hooks han demostrado mucha importancia en el desarrollo actual de React, porque ofrecen una manera elegante y eficiente de compartir lógica entre componentes. Ya sea para abstraer lógica compleja, eliminar la repetición de código o facilitar el intercambio de funcionalidades entre componentes no relacionados.
Personalmente, creo que es importante saber entender estos conceptos para saber cuándo mantener nuestra lógica en nuestros servicios y cuándo utilizarlos como Custom Hooks. Me considero muy fan de manejar la mayoría de la lógica como un servicio y solo utilizar Custom Hooks para casos específicos muy comunes, hooks comunes como:** useFocus, useWindowSize, useFormUpdate**. Estos son ejemplos de hooks que suelo usar con frecuencia en mis proyectos y que me ayudan a manejar cierta lógica compartida entre componentes.
En otro blog podríamos profundizar en cómo implementar estos hooks si te parece interesante 🎯
Top comments (0)