J'ai trouvé un moyen de mettre en cache le récupérateur dans useSWR en utilisant useCallback dans le code source de Gitroom.

L'image ci-dessus provient de platform-analytics/render.analytics.tsx. Essayons de comprendre cet extrait de code.

nous explorerons comment optimiser la récupération de données dans vos applications React à l'aide du hook useCallback en combinaison avec useSWR. Nous allons décomposer l'extrait de code fourni et expliquer pourquoi la mise en cache de votre fonction de récupération est importante.

Comprendre le code

Plongeons dans le code étape par étape :

const load = useCallback(async () => {
  setLoading(true);
  const load = (
    await fetch(\`/analytics/${integration.id}?date=${date}\`)
  ).json();
  setLoading(false);
  return load;
}, \[integration, date\]);

Ici, nous définissons un chargement de fonction asynchrone à l'intérieur d'un hook useCallback. Cette fonction récupère les données d'un point de terminaison spécifié et gère l'état de chargement. Le hook useCallback garantit que cette fonction est mémorisée et recréée uniquement lorsque les dépendances (intégration et date) changent.

Ensuite, nous utilisons useSWR pour gérer la récupération des données :

const { data } = useSWR(\`/analytics-${integration?.id}-${date}\`, load, {
  refreshInterval: 0,
  refreshWhenHidden: false,
  revalidateOnFocus: false,
  revalidateOnReconnect: false,
  revalidateIfStale: false,
  refreshWhenOffline: false,
  revalidateOnMount: true,
});

Ici, useSWR est configuré avec une clé (/analytics-${integration?.id}-${date}) et notre fonction de chargement mémorisée. Les options de configuration contrôlent le comportement de revalidation des données.

Comment useCallback empêche les récupérations inutiles

Pour comprendre comment useCallback empêche les nouvelles récupérations inutiles, nous devons examiner comment React gère les références de fonction et comment fonctionne useSWR.

Références de fonctions dans React

Dans React, chaque fois qu'un composant est restitué, toutes les fonctions définies en son sein sont recréées. Cela signifie que sans useCallback, une nouvelle instance de votre fonction de chargement serait créée à chaque rendu.

Impact sur l'utilisationSWR

useSWR est une bibliothèque de récupération de données pour React. Il utilise une clé pour identifier les données et une fonction de récupération pour les récupérer. useSWR s'appuie sur la stabilité de la référence de la fonction de récupération. Si la référence change, useSWR peut interpréter cela comme un signal indiquant que les données doivent être récupérées, même si la logique réelle de l'outil de récupération n'a pas changé.

Voici une explication détaillée :

1. Sans utiliserCallback :

const load = async () => {
  setLoading(true);
  const load = (
    await fetch(\`/analytics/${integration.id}?date=${date}\`)
  ).json();
  setLoading(false);
  return load;
};

const { data } = useSWR(\`/analytics-${integration?.id}-${date}\`, load, {
  refreshInterval: 0,
  refreshWhenHidden: false,
  revalidateOnFocus: false,
  revalidateOnReconnect: false,
  revalidateIfStale: false,
  refreshWhenOffline: false,
  revalidateOnMount: true,
});

Dans ce cas, chaque rendu crée une nouvelle fonction de chargement. useSWR voit une référence de fonction différente à chaque fois, ce qui peut conduire à des récupérations inutiles même lorsque l'intégration et la date n'ont pas changé.

Avec useCallback :

const load = useCallback(async () => {
  setLoading(true);
  const load = (
    await fetch(\`/analytics/${integration.id}?date=${date}\`)
  ).json();
  setLoading(false);
  return load;
}, \[integration, date\]);

const { data } = useSWR(\`/analytics-${integration?.id}-${date}\`, load, {
  refreshInterval: 0,
  refreshWhenHidden: false,
  revalidateOnFocus: false,
  revalidateOnReconnect: false,
  revalidateIfStale: false,
  refreshWhenOffline: false,
  revalidateOnMount: true,
});

En encapsulant la fonction de chargement dans useCallback, nous nous assurons qu'elle n'est recréée que lorsque ses dépendances (intégration et date) changent. Cette stabilité dans la référence de fonction indique à useSWR que la fonction de récupération n'a pas changé à moins que l'intégration ou la date ne change, évitant ainsi les nouvelles récupérations inutiles.

Vous voulez apprendre à créer shadcn-ui/ui à partir de zéro ? Découvrez construire à partir de zéro

Sur moi:

Site Web : https://ramunarasinga.com/

Linkedin : https://www.linkedin.com/in/ramu-narasinga-189361128/

Github : https://github.com/Ramu-Narasinga

E-mail : [email protected]

Créer shadcn-ui/ui à partir de zéro

Références :

1. https://github.com/gitroomhq/gitroom/blob/c03b96215fa30b267a97d7eafc2281f482a3192f/apps/frontend/src/components/platform-analytics/render.analytics.tsx#L25
2. https://github.com/search?q=repo:gitroomhq/gitroom useSWR&type=code
3. https://swr.vercel.app/docs/getting-started
4. https://react.dev/reference/react/useCallback