El uso de Custom Hooks en React se ha establecido como un enfoque genial para abstraer lógica recurrente y mejorar la legibilidad y mantenibilidad de tus componentes. En este tutorial, aprenderás, a través del ejemplo "useJsonFetch", cómo puedes crear tus propios Hooks diseñados específicamente para obtener datos JSON de un servidor. Vamos a sumergirnos directamente en el tema.
Principales conclusiones
- Los Custom Hooks son funciones simples que utilizan React Hooks.
- Permiten la reutilización de lógica a lo largo de varias componentes.
- Un Custom Hook puede manejar múltiples estados como loading, data y error.
- La estructura y la implementación de un Custom Hook son sencillas y claras.
Guía paso a paso para la creación del Hook useJsonFetch
Consideración fundamental
Antes de escribir tu propio Hook, es importante definir la funcionalidad que necesitas. En este caso, quieres crear un Hook que recuperará datos JSON de un servidor. Nombramos nuestro Hook "useJsonFetch". Para comprender cómo implementar este Hook, primero observa cómo usar useJsonFetch en un componente.
Llamas al Hook y le pasas la URL de la cual deseas recuperar los datos JSON. El Hook será responsable de obtener los datos y manejar los estados de carga y error.
Implementación de useJsonFetch
Para implementar el Custom Hook, crearás un nuevo archivo que comience por "use" para cumplir con las convenciones de React. Por lo tanto, el nombre del archivo sería useJsonFetch.js.
En este archivo, crearás una función que tome la URL como parámetro. En la función, definirás los estados para data, error y loading.
En este caso, data comienza como undefined, error también y loading inicia como true para indicar el estado de carga. Esto se debe a la forma en que JavaScript maneja operaciones asíncronas.
Uso de useEffect
Dentro del Hook, utilizarás useEffect para iniciar el proceso de fetch cuando el componente se monte. Asegúrate de actualizar el estado de loading adecuadamente.
Con await, llamas inicialmente la URL con fetch. Dado que fetch devuelve una Promise, puedes esperar la respuesta con await. Después de obtener la respuesta, conviertes los datos en un objeto JavaScript con.json().
Si ocurre un error, lo manejas con try-catch y estableces el estado de error. Independientemente de si la solicitud fue exitosa o si ocurrió un error, asegúrate de establecer loading en false una vez que la respuesta haya llegado.
Retorno del Hook
Al final, devolverás los estados data, error y loading como un objeto para que estén disponibles para el componente que llama.
Uso del Hook en un componente
Una vez que hayas creado tu Hook, puedes usarlo en tu componente. Importa useJsonFetch en tu componente y utiliza la técnica de Destructuring para obtener los valores.
Luego puedes implementar la visualización de carga verificando loading, y mostrar los datos obtenidos cuando estén disponibles.
Al usar useJsonFetch, puedes mantener la separación lógica entre la recuperación de datos y la lógica de la interfaz de usuario, lo que mejora significativamente el mantenimiento de tus componentes.
Conclusión sobre la creación de Custom Hooks
Crear Custom Hooks es un proceso simple pero efectivo que te ayuda a organizar tu código. Puedes encapsular lógica reutilizable e implementarla en cualquier componente que necesite la misma funcionalidad. Al usar Custom Hooks, también puedes separar la recuperación en red y la respuesta a estados de carga o error de la presentación de datos.
Resumen
Con un Hook propio como useJsonFetch, aprendes a manejar las solicitudes de datos asíncronas en React. Esto mejora significativamente la reutilización y la estructura de tu código. Has visto cómo puedes establecer una estructura simple para recuperar datos JSON y administrar eficazmente los diferentes estados.
