¿En qué parte de un componente React debe realizar una solicitud AJAX?

En la mayoría de las aplicaciones web modernas, el backend está separado del frontend. Por lo tanto, necesita obtener datos de un punto final remoto (servidor), realizando requests AJAX .

Estas requests de AJAX deben realizarse después de que el componente se haya procesado en el navegador y, por lo general, deben realizarse solo una vez. Por lo tanto, el mejor lugar para realizar las requests es dentro de un gancho useEffect . Echemos un vistazo a cómo podemos implementar esto.

Creando la aplicación React: 

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app myapp

Paso 2: después de crear la carpeta de su proyecto, es decir, myapp, acceda a ella con el siguiente comando:

cd myapp

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura inicial de carpetas

Implementación: ahora que tenemos el proyecto configurado, reemplacemos el contenido de App.js, ubicado dentro de la carpeta src , con el siguiente código.

import React, { useState, useEffect } from "react";
  
const App = () => {
  const [text, setText] = useState("Data has not been fetched yet!");
    
  useEffect(() => {
    fetch("https://catfact.ninja/fact")
      .then((response) => response.json())
      .then(({ fact }) => setText(fact))
      .catch((error) => {
        setText("An error occurred!");
      });
  }, []);
    
  return <div>{text}</div>;
};
  
export default App;

Paso para ejecutar la aplicación: use el siguiente comando para ejecutar la aplicación en modo de desarrollo y abra http://localhost:3000 para verla en el navegador:

npm start

Producción:

Cada vez que recargamos, el texto que se muestra cambia de «¡Los datos aún no se han obtenido!» a los datos de respuesta

Explicación: Aquí, hacemos una solicitud AJAX dentro del enlace useEffect, con la ayuda de una API de uso gratuito. El gancho useEffect tiene un segundo parámetro: una array vacía. Esta array se conoce como array de dependencia, y si algún elemento presente en la array de dependencia cambia entre representaciones sucesivas del componente, se ejecuta el código dentro de ese useEffect (puede haber más de un useEffect en un componente). Por lo tanto, una array de dependencia vacía significa que el código dentro de nuestro useEffect se ejecutará solo una vez, en la primera representación.

Una vez que obtenemos la respuesta, cambiamos el valor de la variable de texto de «¡Los datos aún no se han obtenido!» a los datos de respuesta. Así podemos ver que la solicitud AJAX se ha realizado con éxito.