Tras casi dos años disfrutando de los “hooks” de React me gustaría compartir con todos vosotros la forma en que suelo hacer llamadas a API’s externas en proyectos sencillos donde no requiero de la funcionalidad extra que me proporciona la siempre fantástica librería React Query.

La idea es combinar los hooks useState y useCallback para crear un custom hook llamado useFetch que nos permita realizar llamadas asíncronas cuando lo necesitemos a la vez que recibimos el estado en que se encuentra la llamada. Este estado puede ser uno de los 3 siguientes: “loading”, “failed” y “succeeded”. Creo que no hace falta que indique lo que significa cada uno, ¿no?

¡Comencemos!

El hook useFetch

Lo primero que vamos a hacer va a ser crear una función llamada sendRequest que encapsule el uso de la función fetch que nos proporcionan los navegadores para realizar llamadas asíncronas. ¿Por qué hago esto? Para favorecer la mantenibilidad del código y su posterior modificación: si en un futuro quisiéramos usar otra librería (como Axios) sólo tendremos que modificar esta función en vez de realizar un “buscar y reemplazar” en todo el proyecto, algo que siempre trae problemas.

Nota. Sé que es una versión muy simplificada pero he preferido no complicar mucho esta función con el objetivo de conseguir que este artículo sea fácil de seguir. Sentíos libres de añadir más funcionalidad o mejorarla.

Ahora que tenemos creada la función sendRequest vamos a la chicha. El objetivo es crear un “custom hook” llamado useFetch que tenga dos características:

• Nos debe permitir acceder al estado de la llamada (loading, succeeded o failed) así como al resultado de la misma.
• Nos debe proporcionar una función para realizar la llamada que queramos hacer de modo que al invocarla el estado anterior se vaya actualizando.

Sabiendo esto, mi propuesta de implementación es la siguiente:

En primer lugar, declaro un estado en forma de objeto mediante el hook useState con las siguientes propiedades:

• 3 booleanos (cada uno correspondiente a uno de los posibles estados que puede atravesar la llamada).
• Una propiedad data donde se encontrará el resultado de la llamada.
• Una propiedad error para almacenar un objeto de la clase Error en el caso de que algo haya salido mal.

Por otra parte creo una función fetchData memorizada mediante el hook useCallback (así me aseguro de obtener siempre la misma “instancia” en cada llamada del hook) que será la responsable de realizar la llamada.

Esta función recibe un objeto con 3 propiedades:

• la url de la llamada,
• el method para realizar la llamada,
• y el body de la misma en el caso de que se trate una llamada de tipo POST , PUT , etc.

Y realiza lo siguiente:

• Actualiza el estado antes de invocar a sendRequest para marcar la llamada como “cargando”.
• Invoca la función sendRequest con las propiedades del objeto recibido.
• En el caso de que la llamada se realice de forma correcta, la llamada es marcada como exitosa y se almacena el resultado en el estado (también es devuelto por si el componente prefiere usarlo inmediatamente).
• Si la llamada falló, el estado es actualizado para indicarlo y se almacena el error en el estado.

Finalmente, el hook useFetch devuelve un array con dos posiciones:

• El objeto con el estado en que se encuentra la llamada.
• La función memorizada fetchData para realizar la llamada asíncrona.

¡Llega el momento de probar nuestro invento!

Realizar una llamada GET para recuperar una lista de usuarios

En el primer ejemplo usaremos el hook useFetch para recuperar una lista de usuarios de la API que nos proporciona la web Reqres (una de mis favoritas para hacer pruebas).

En este caso nos valdremos del hook useEffect para recuperar la lista de usuarios tras el primer render, algo que lograremos invocando dentro del efecto la función devuelta por nuestro hook useFetch :

useEffect(
  function () {
    fetchUsers({
      url: "https://reqres.in/api/users",
      method: "GET"
    });
  },
  [fetchUsers]
);

Posteriormente usamos el estado del estado para pintar los distintos mensajes a medida que la llamada se resuelve. En el caso de que haya tenido éxito pintaremos la lista de usuarios que hemos recuperado.

Realizar una llamada POST para crear un usuario

Veamos ahora la forma en que podemos emplear nuestro hook useFetch para realizar una llamada POST contra la API y así crear un nuevousuario:

En este caso, la función que nos devuelve el hook useFetch no queremos invocarla tras el primer render, sino que lo haremos una vez que el usuario envía el formulario. Esto sucede dentro de la función handleSubmit del código anterior en donde enviamos los datos escritos por el usuario dentro del formulario.

function handleSubmit(event) {
  event.preventDefault();
  postUser({
      url: "https://reqres.in/api/users",
      method: "POST",
      body: JSON.stringify({ name, job })
  });
}

Como veis, el hook useFetch es muy versátil, permitiéndonos invocarlo en distintas situaciones para ofrecer “feedback” al usuario sobre el estado de la llamada.

Paginación

Y sí, nuestro hook useFetch se lleva perfectamente con llamadas paginadas como podéis ver a continuación (la API de Reqres admite un parámetro para especificar la página que queremos recuperar):

No ha sido necesario modificar el hook useFetch para nada, sino que almacenando en el estado la página en la que se encuentra y valiéndonos de las dependencias del hook useEffect podemos recuperar la página seleccionada.

¿Dudas con el hook useEffect?

Si tienes dudas sobre el hook useEffect y la forma en que lo estoy usando a lo largo de este capítulo te invito a que veas el siguiente vídeo que grabé explicando todas sus características:

Conclusiones

Creo que el hook useFetch es uno de esos hooks que merece la pena tener a mano si no queremos tirar de librerías más potentes como la ya mencionada React Query. Espero haber ilustrado todas sus ventajas con cada uno de los ejemplos que he mencionado: es versátil, fácil de usar y podemos extenderlo fácilmente si por ejemplo queremos cachear las llamadas (puede ser un buen ejercicio 🤓).

Os dejo el enlace al CodeSanbox que he creado para que podáis ver en directo todo lo que aquí he contado:

¡Espero que os haya resultado interesante!

¿Quieres recibir más artículos como este?

Si te ha gustado este artículo te animo a que te suscribas a la newsletter que envío cada domingo con publicaciones similares a esta y más contenido recomendado: 👇👇👇

Apóyame en Patreon

🧡🧡🧡 Gracias a: Joseba, Óscar, Alex, Jorge y Carolina.