Accéder à la page github

Hooks personnalisés

Les hooks personnalisés en React permettent aux développeurs de créer des hooks pour réutiliser la logique d'état et de comportement dans différents composants de l'application. Pour les créer, il faut utiliser la liste de hooks déjà mise en place par React parmi lesquels, useState, useEffect, useContext etc...

Par convention, il faut que le hooks débute par use afin que react et tout autre développeur sache de quel composant il s'agit.

Nous voulons avoir la possibilité de filtrer nos valeurs en fonction des valeurs que nous renseignons dans notre filtre.

Commençons par créer notre hooks personnalisé useGetImages.js.

Nous pouvons ajouter l'extension js ou jsx. Dans ce cas, ça n'a pas d'importance vu que nous n'utilisons pas de syntaxe html à interpréter par React. Vite comprendra qu'il s'agit d'un fichier javascript.

./src/useGetImages.js

import { useEffect, useState } from "react";


let localCache = []


const useGetImages = (filter="") => {
    const [cryptos, setCrypto] = useState([]);
    const [status, setStatus] = useState("unloaded");
    useEffect(() => {
        if(localCache.length === 0) {
            requestImages()
        } else if (localCache.length > 0) {
            setCrypto(localCache.filter(filterfunc))
            setStatus("loaded")
        }
        // eslint-disable-line react-hooks/exhaustive-deps
        async function requestImages() {
            console.log("request images")
          const apiRep = await fetch(
            "https://mongodb-image-api.vercel.app/api/listCryptoLogo"
          );
          const json = await apiRep.json();
          setCrypto(json.filter(filterfunc))
          localCache = json || [];
          setStatus("loaded");
        }
        function filterfunc (code) {
            return (
                code.currency_code.toLowerCase().includes(filter.toLowerCase()) ||
                code.currency_long.toLowerCase().includes(filter.toLowerCase())
            )
        }
    },[filter])
    return [status, cryptos]
}


export default useGetImages

  • Comme mentionné plus haut, nous utiliser les hooks que react à l'intérieur de notre hook personnalisé.

  • Nous retournons deux valeurs à notre composant, la première est le statut d'import et le second est la liste des informations sur les cryptos.

  • Nous utilisons la variable localCache afin d'éviter de surcharger les requêtes sur notre serveur et d'utiliser la donnée une seule fois.

Ensuite, modifions le composant Crypto.jsx pour importer nos données et utiliser notre hooks personnalisés.

Dans le fichier, importer useGetImages.js et utiliser les différentes variables qu'il expose. Mettre à jour le fichier et vérifier que les données s'affichent de nouveau.

./src/Crypto.jsx

import useGetImages from "./useGetImages";
const Crypto = () => {
 const [status, cryptos] = useGetImages("")
  return (
    <div>
      {status!== "loaded" && <div>Chargement....</div>}
      {status === "loaded" && cryptos.map((crypto) => (
        <div key={crypto.currency_long}>
          <h1>{crypto.currency_long}</h1>
          <h2>{crypto.currency_code}</h2>
        </div>
      ))}
    </div>
  );
};
export default Crypto;

  • En modifiant la valeur de useGetImages, par exemple useGetImages("algo") , vous verrez que votre tableau se met à jour avec le filtre.

Accéder au fichier du projet pour cette étape

06-Hooks_Pers

  • .eslintrc.json
  • .gitignore
  • .package.json
  • .prettierrc
  • vite.config.js

Aucune sélection

Sélectionner un fichier