Comprendre et prévenir les cascades de récupération dans React

Si vous êtes un développeur React, il y a fort à parier que vous avez rencontré des cascades de récupération - également appelées cascades de requêtes ou cascades de réseau. Leur forme distinctive apparaît dans les outils d'analyse lorsque vous essayez de voir ce qui prend si longtemps à charger la page que vous avez minutieusement conçue.

Dans cet article de blog, nous verrons ce que sont les cascades de récupération, pourquoi elles se produisent, comment elles affectent vos applications React et, plus important encore, comment les éviter.

Qu'est-ce qu'une cascade de récupération ?

Commençons par les bases.

Une cascade de récupération est un problème de performances qui se produit lorsque plusieurs appels d'API ou requêtes de récupération sont enchaînés et exécutés les uns après les autres. Plutôt que d'envoyer plusieurs requêtes en parallèle (ce qui leur permettrait de se terminer simultanément), les requêtes sont mises en file d'attente et exécutées dans l'ordre. Cela entraîne des retards importants dans le rendu des pages, surtout si le nombre de récupérations augmente.

Voici une représentation visuelle simple de ce à quoi cela ressemble :

Source : Sentry.io

Dans l'image ci-dessus, vous pouvez clairement voir les retards séquentiels selon un motif en « cascade ». Chaque requête ne démarre qu'une fois la précédente terminée. En pratique, même un léger retard dans une requête peut entraîner une augmentation spectaculaire du temps de chargement de la page entière.

Cela est particulièrement gênant pour l'expérience utilisateur, car les utilisateurs Web modernes s'attendent à des applications à chargement rapide. Quelques secondes de retard peuvent entraîner des taux de rebond plus élevés et un engagement plus faible, ce qui a un impact sur le succès global de votre candidature.

Pourquoi les cascades de récupération se produisent-elles ?

Les cascades de récupération dans React se produisent généralement en raison de la structure hiérarchique des composants. Voici un scénario typique :

1. Le composant parent récupère les données : le composant parent lance une demande de récupération lors de son montage.
2. Les composants enfants attendent des données : les composants enfants s'appuient sur les données récupérées par le parent et ne sont rendus qu'une fois que les données du parent sont disponibles.
3. Demandes séquentielles : s'il existe plusieurs composants imbriqués, chacun peut déclencher des requêtes de récupération de manière séquentielle, provoquant un effet « cascade ».

Ce comportement en cascade se produit parce que les composants de React s'affichent de manière asynchrone. Lorsque le composant parent récupère des données, les composants enfants peuvent devoir attendre que la demande du parent soit terminée. Si ces récupérations ne sont pas traitées efficacement, vous pouvez vous retrouver avec un retard important car chaque requête dépend de la précédente.

Comment identifier les cascades de récupération

Pour identifier si votre application React souffre de cascades de récupération, vous pouvez utiliser des outils tels que Chrome DevTools ou React DevTools pour surveiller les requêtes et les performances du réseau. Dans Chrome DevTools, accédez à l'onglet Réseau et recherchez les appels API séquentiels qui bloquent le processus de chargement de la page.

Dans React DevTools, vous pouvez inspecter les rendus des composants et identifier toutes les dépendances inutiles provoquant le déclenchement de requêtes d'extraction plusieurs fois.

Voici quelques signes indiquant qu'une cascade de récupération peut se produire :

• Temps de chargement des pages lents : si le chargement de votre page prend plus de temps que prévu.
• Modèles de performances suspects : si vous remarquez une série d'appels d'API qui semblent être effectués les uns après les autres plutôt qu'en parallèle.

Comment empêcher la récupération des cascades dans React

Heureusement, il existe plusieurs stratégies pour éviter les cascades de récupération et optimiser vos applications React pour de meilleures performances.

1. Récupérer des données en parallèle

Au lieu d'attendre la fin de chaque requête API avant de démarrer la suivante, envisagez d'exécuter plusieurs requêtes de récupération en parallèle. Cela peut être fait à l'aide de la méthode Promise.all() de JavaScript, qui vous permet d'exécuter plusieurs promesses simultanément.

Voici un exemple de récupération de données en parallèle :

const fetchData = async () => {
const [data1, data2, data3] = await Promise.all([
  fetch('/api/data1').then(res => res.json()),
  fetch('/api/data2').then(res => res.json()),
  fetch('/api/data3').then(res => res.json()),
]);
// Use the data
};

En récupérant les données en parallèle, vous réduisez le temps d'attente total et permettez au navigateur de charger les ressources plus rapidement.

2. Découpler la récupération des données des composants

Vous pouvez refactoriser vos composants afin qu'ils ne s'appuient pas sur les données du composant parent pour déclencher leurs propres récupérations. Au lieu de cela, laissez chaque composant enfant gérer sa propre récupération de données indépendamment. Cela peut être fait en élevant l'état et en transmettant les données nécessaires ou en utilisant des bibliothèques comme React Query ou SWR pour gérer la récupération au niveau des composants.

3. Utilisez React Query ou SWR

Les bibliothèques comme React Query et SWR sont idéales pour gérer la récupération de données dans les applications React. Ils gèrent la mise en cache, la récupération des données en arrière-plan et la gestion des erreurs, tout en vous permettant également de récupérer efficacement des données en parallèle.

React Query, par exemple, gère automatiquement la mise en cache, les tentatives et la synchronisation en arrière-plan pour la récupération des données, garantissant ainsi que vos composants n'attendent pas inutilement les données et que les appels réseau ne sont effectués qu'en cas de besoin.

const fetchData = async () => {
const [data1, data2, data3] = await Promise.all([
  fetch('/api/data1').then(res => res.json()),
  fetch('/api/data2').then(res => res.json()),
  fetch('/api/data3').then(res => res.json()),
]);
// Use the data
};

4. Cache les données pour réduire les demandes redondantes

La mise en cache peut réduire considérablement le besoin de requêtes redondantes vers le serveur. En stockant les données récupérées localement (dans l'état du composant, le contexte ou une bibliothèque de mise en cache comme React Query), vous pouvez éviter les requêtes réseau inutiles, rendant votre application plus rapide et plus efficace.

Conclusion

La récupération des cascades dans React peut être une source majeure de goulots d'étranglement en termes de performances, mais avec les bonnes stratégies, elles peuvent être facilement évitées. En récupérant les données en parallèle, en dissociant la récupération des données des composants et en tirant parti de puissantes bibliothèques telles que React Query, vous pouvez améliorer les performances de vos applications React et améliorer l'expérience utilisateur.

Si vous êtes confronté à des cascades de récupération fréquentes dans votre base de code React, cela vaut la peine de prendre du recul pour analyser vos modèles de récupération de données et mettre en œuvre ces meilleures pratiques. En fin de compte, l'optimisation de la façon dont votre application interagit avec les API se traduira par des applications plus rapides, plus fiables et évolutives.

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!