Vitrine d'un hook léger pour la récupération et la mise en cache de données asynchrones dans React

Salut tout le monde !

J'ai travaillé sur un hook React léger que j'ai appelé useAsync qui imite certaines des fonctionnalités essentielles de React Query (comme la récupération, la mise en cache, les tentatives, etc.) mais dans un format plus compact, package facilement personnalisable. Vous trouverez ci-dessous un aperçu rapide de son fonctionnement en interne, faisant référence aux sections de code pertinentes. Si vous souhaitez voir l'intégralité du code, rendez-vous sur le dépôt :

Code source complet sur GitHub.
Le hook est également disponible sur npm sous le nom api-refetch.

---

Pourquoi fabriquer mon propre crochet ?

Bien que React Query et SWR soient tous deux d'excellentes bibliothèques, je souhaitais une approche plus pratique pour plusieurs raisons :

1. Empreinte légère
   
   Bien que React Query et SWR soient riches en fonctionnalités, ils peuvent être relativement volumineux (React Query ~2,2 Mo, SWR ~620 Ko). api-refetch fait environ 250 Ko, ce qui le rend idéal pour les petites applications où la taille du bundle est une grande préoccupation. Ce hook est destiné à être installé en tant que dépendance d'une autre bibliothèque (Intlayer). En conséquence, la taille de la solution était une considération importante.

2. Facile à personnaliser et à optimiser
   J'avais besoin de fonctionnalités spécifiques, comme le stockage/récupération de données à partir du stockage local et la gestion des requêtes parallèles en utilisant une approche simple.
   En clonant le dépôt ou en copiant le code directement dans votre projet, vous pouvez supprimer toutes les fonctionnalités indésirables et ne conserver que ce dont vous avez besoin. Cela réduit non seulement la taille du bundle, mais minimise également les nouveaux rendus et les augmentations inutiles, vous offrant ainsi une solution plus légère et plus performante, adaptée à vos besoins spécifiques.

3. Aucun fournisseur requis
   
   Je voulais éviter que Context Provider rende le hook global et que son utilisation soit aussi simple que possible. J'ai donc réalisé une version du crochet basée sur un magasin Zustand (voir exemple ci-dessous).

4. Exercice d'apprentissage
   
   Construire une bibliothèque asynchrone à partir de zéro est un excellent moyen de comprendre les composants internes de la concurrence, de la mise en cache et de la gestion de l'état.

En bref, lancer mon propre crochet était une chance de me concentrer précisément sur les fonctionnalités dont j'avais besoin (et ignorer celles dont je n'ai pas besoin) tout en gardant la bibliothèque petite et facile à comprendre.

Fonctionnalités couvertes

La gestion du hook React :

• Récupération et gestion des états : gère le chargement, les erreurs, le succès et les états récupérés.
• Mise en cache et stockage : met éventuellement en cache les données (via les états React ou Zustand sous le capot) et offre une prise en charge du stockage local.
• Tentatives et revalidation : limites de tentatives configurables et intervalles de revalidation automatique.
• Activation et invalidation : active et invalide automatiquement les requêtes en fonction des autres requêtes ou états. Exemple : récupérer automatiquement certaines données lorsque l'utilisateur se connecte. Et les invalider lorsque l'utilisateur se déconnecte.
• Récupération de montage de composants parallèles : empêche plusieurs demandes simultanées pour la même ressource lorsque plusieurs composants sont montés en même temps.

Comment fonctionne le code

Vous trouverez ci-dessous les points clés d'api-refetch et de courtes références aux parties pertinentes du code dans useAsync.tsx.

1. Récupération et gestion du montage parallèle

• Extrait de code :

  // This map stores any in-progress Promise to avoid sending parallel requests
  // for the same resource across multiple components.
  const pendingPromises = new Map();

  const fetch: T = async (...args) => {
    // Check if a request with the same key + args is already running
    if (pendingPromises.has(keyWithArgs)) {
      return pendingPromises.get(keyWithArgs);
    }

    // Otherwise, store a new Promise and execute
    const promise = (async () => {
      setQueryState(keyWithArgs, { isLoading: true });

      // ...perform fetch here...
    })();

    // Keep it in the map until it resolves or rejects
    pendingPromises.set(keyWithArgs, promise);
    return await promise;
  };

• Explication : Ici, nous stockons toute récupération en cours dans une carte endingPromises. Lorsque deux composants tentent de récupérer la même ressource simultanément (en ayant le même keyWithArgs), le second réutilise simplement la requête en cours au lieu de faire un appel réseau en double.

---

2. Revalidation

• Extrait de code :

  // Handle periodic revalidation if caching is enabled
  useEffect(
    () => {
      if (!revalidationEnabled || revalidateTime  {
        fetch(...storedArgsRef.current);
      }, revalidateTime);

      return () => clearTimeout(timeout);
    },
    [
      /* dependencies */
    ]
  );

• Explication : Chaque fois que vous activez la revalidation, api-refetch vérifie si les données mises en cache sont plus anciennes qu'un revalidateTime spécifié. Si tel est le cas, les données sont automatiquement récupérées en arrière-plan pour maintenir votre interface utilisateur synchronisée sans déclencheurs manuels supplémentaires.

---

3. Réessayer la logique

• Extrait de code :

  useEffect(
    () => {
      const isRetryEnabled = errorCount > 0 && retryLimit > 0;
      const isRetryLimitReached = errorCount > retryLimit;

      if (!isEnabled || !enabled) return; // Hook is disabled
      if (!isRetryEnabled) return; // Retry is disabled
      if (isRetryLimitReached) return; // Retry limit has been reached
      if (!(cacheEnabled || storeEnabled)) return; // Useless to retry if caching is disabled
      if (isLoading) return; // Fetch is already in progress
      if (isSuccess) return; // Hook has already fetched successfully

      const timeout = setTimeout(() => {
        fetch(...storedArgsRef.current);
      }, retryTime);

      return () => clearTimeout(timeout);
    },
    [
      /* dependencies */
    ]
  );

• Explication : En cas d'erreur, le hook compte le nombre de tentatives infructueuses qui ont eu lieu. S'il est toujours inférieur au retryLimit, il attend automatiquement retryTime millisecondes avant de réessayer. Ce processus se poursuit jusqu'à ce que les données soient récupérées avec succès ou que la limite de nouvelles tentatives soit atteinte.

---

4. Récupération automatique

• Extrait de code :

  // Auto-fetch data on hook mount if autoFetch is true
  useEffect(
    () => {
      if (!autoFetch) return; // Auto-fetch is disabled
      if (!isEnabled || !enabled) return; // Hook is disabled
      if (isFetched && !isInvalidated) return; // Hook have already fetched or invalidated
      if (isLoading) return; // Fetch is already in progress

      fetch(...storedArgsRef.current);
    },
    [
      /* dependencies */
    ]
  );

• Explication : Avec autoFetch défini sur true, le hook exécutera automatiquement la fonction asynchrone dès que le composant sera monté, ce qui est parfait pour les scénarios « tirer et oublier » où vous souhaitez toujours que les données soient chargées.

---

Voir la source complète sur GitHub

Découvrez le code complet, qui inclut la logique de stockage local, l'invalidation des requêtes et bien plus encore ici :

• Code source complet

N'hésitez pas à l'essayer, à signaler des problèmes ou à contribuer si vous êtes intéressé. Tout commentaire est très apprécié !

Exemple d'utilisation

Installation

Copiez le code ou codez le (repo)[https://github.com/aymericzip/api-refetch]

Ou

  // This map stores any in-progress Promise to avoid sending parallel requests
  // for the same resource across multiple components.
  const pendingPromises = new Map();

  const fetch: T = async (...args) => {
    // Check if a request with the same key + args is already running
    if (pendingPromises.has(keyWithArgs)) {
      return pendingPromises.get(keyWithArgs);
    }

    // Otherwise, store a new Promise and execute
    const promise = (async () => {
      setQueryState(keyWithArgs, { isLoading: true });

      // ...perform fetch here...
    })();

    // Keep it in the map until it resolves or rejects
    pendingPromises.set(keyWithArgs, promise);
    return await promise;
  };

Exemple rapide

  // Handle periodic revalidation if caching is enabled
  useEffect(
    () => {
      if (!revalidationEnabled || revalidateTime  {
        fetch(...storedArgsRef.current);
      }, revalidateTime);

      return () => clearTimeout(timeout);
    },
    [
      /* dependencies */
    ]
  );

---

C'est ça ! Essayez-le et dites-moi comment ça se passe. Les commentaires, questions ou contributions sont plus que les bienvenus sur GitHub.

GitHub : api-refetch

Bon codage !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!