Introducción

Para trabajar con Peticiones AJAX desde JavaScript vanilla necesitamos hacer uso de la API Web XMLHttpRequest. Antiguamente, era necesario acceder a la misma creando una instancia de objeto y manipular todas las configuraciones necesarias desde ahí. Hoy en día, con la aparición de las Promesas, Método .fetch() y las Funciones Async esa configuración se automatizó a tal punto que, muchas veces, ni siquiera debemos generar una configuración manual para nuestras Peticiones.

¿Por qué es esto relevante? Bueno, la API Web XMLHttpRequest es parte del Browser Object Model (BOM ⇒ contiene todas las API Web que permiten manipular funcionalidades del navegador) y, por tanto, si queremos acceder a ella necesitamos que nuestro código se ejecuta en el navegador.

¿Qué implica esto para el trabajo con React? Si tenemos en cuenta que todos nuestros componentes son manipulados por el VirtualDOM quien se encarga de generar la vista con los datos que le proveemos. La única forma de obtener datos mediante Peticiones AJAX es a través de la manipulación del Ciclo de Vida del Componente o la ejecución de la Petición como respuesta a algún Evento que, una vez obtenida la respuesta, modifique un valor de State.

Realizar una Petición AJAX en React


Consideraciones de uso

  • No usar como dependencia del useEffect el valor de State que almacenará los datos obtenidos en la API ⇒ Error: loop infinito - Los Arrays siempre son distintos aunque tengan los mismos datos porque en JS un Objeto (todo Array es un Objeto) solo es igual a sí mismo. Cuando evaluamos ["dato"] === ["dato"] obtenemos false porque cada Array es un espacio de almacenamiento único e irrepetible, por tanto, son dos espacios de almacenamiento distintos aunque almacenen los mismos datos.
  • No convertir la función callback del efecto en función async ⇒ Error: carrera de Componentes - El VirtualDOM trabaja de forma sincrónica montando cada Componente según su posición en el Árbol de Componentes. Si convertimos en async la callback del useEffect, al momento de querer montar el Componente no tiene disponible los datos del State de dicho Componente. Esto genera que todo Componente dependiente tenga un error de vista. Ejecutar una función async dentro de la callback del useEffect le da un valor por defecto que luego es reemplazado por los valores correctos al momento del montaje actualizado.
  • Manejar el estado de la petición si el Componente que la usa puede no montarse ⇒ Error: El Componente no se monta, pero la petición se hace igual - Los efectos son funciones y todas las funciones se ejecutan a completitud, es decir, se realiza toda la operación declarada dentro de la misma. Cuando hacemos validaciones ponemos una evolución al comienzo de la función en la que ejecutamos un return si obtenemos un true. De esta forma evitamos que se ejecute el código cuando no corresponde. El mismo concepto debe ser aplicado en los efectos.

Strict Mode

Para finalizar este post vamos a hablar sobre Strict Mode. Este es un Componente que envuelve al Componete App y está pensado para ayudarnos a escribir un mejor código en React. Si creamos la aplicación usando create-react-app se incorporan configuraciones de Linter que, junto al Strict Mode, son de gran utilidad para ayudarnos a no cometer errores.

Algo a tener en cuenta es que Strict Mode, cuando trabajamos con los Métodos del Ciclo de Vida, debe montar dos veces el Componente para poder evaluar posibles errores. Es por este motivo que si hacemos una Petición AJAX y mostramos en consola la actualización veremos una doble ejecución. No te preocupes, no se está haciendo dos veces, es el Strict Mode comprobando que la actualización del State se haya hecho de forma correcta.

Por último, esta doble ejecución solo sucede en desarrollo. No afecta al código de producción.