Hooks - useEffect

Nous connaissons désormais suffisamment pour faire des requêtes API. Dans l'exemple qui suivra, nous voulons que notre application importe un premier jeu de données lorsque nous allons sur notre page. Pour le faire, nous utilisons un hook spécial qui est useEffect .

useEffect permet de dire à React d'afficher d'abord l'UX (le texte, et les autres élements qui n'ont pas besoin de la donnée) et de faire quelque chose par la suite. Dans notre cas, nous allons demander à React d'afficher d'abord notre page, puis de télécharger les données de l'api.

Créer de nouveau le fichier Crypto.jsx si vous l'aviez supprimé :

import { useEffect, useState } from "react";
const Crypto = () => {
  const [cryptos, setCrypto] = useState([]);
  useEffect(() => {
    requestImages();
  }, []);

  // eslint-disable-line react-hooks/exhaustive-deps
  async function requestImages() {
    const apiRep = await fetch(
      "https://mongodb-image-api.vercel.app/api/listCryptoLogo"
    );
    const json = await apiRep.json();
    setCrypto(json);
  }

  return (
    <div>
      {cryptos.map((crypto) => (
        <div key={crypto.currency_long}>
          <h1>{crypto.currency_long}</h1>
          <h2>{crypto.currency_code}</h2>
        </div>
      ))}
    </div>
  );
};
export default Crypto;

Dans le fichier App.jsx, importer le nouveau composant.

import { createRoot } from "react-dom/client";
import SearchFields from "./SearchFields";
import Crypto from "./Crypto";
const App = () => {
  return (
    <div className="container">
      <h1 className="title">Crypto Logos</h1>
      <SearchFields />
      <Crypto />
    </div>
  );
};

const container = document.getElementById("app");
const root = createRoot(container);
root.render(<App />);

• Ici, nous profitons des closures (fonction interne dans un fonction qui peut utiliser les variables de celles-ci) qui nous permet d'utiliser les variables que nous avons définies.

• Nous aurions pu aussi définir la fonction requestImages dans le useEffect, si nous n'avions pas besoin de la réutiliser. En effet, si la fonction se retrouve dans le useEffect, alors, elle ne sera plus accessible ailleurs.

• Les crochets [] à la fin du useEffect sont l'endroit pour définir les variables qui seront utilisées pour relancer la fonction lorsque leur valeurs changent.

• Le bout de code // eslint-disable-line react-hooks/exhaustive-deps permet de dire à Eslint de ne pas s'arrêter uniquement sur cette erreur s'il la détecte.

Accéder au fichier du projet pour cette étape

Sélectionner un fichier