Contre-exemple utilisant à la fois useEffect et React Query

Passons en revue un contre-exemple utilisant à la fois useEffect et React Query pour récupérer et afficher des données dans un composant React, en nous concentrant sur la façon dont chaque approche gère la récupération de données et les effets secondaires.

Nous supposerons que nous récupérons le décompte actuel à partir d'une API, et que ce décompte est mis à jour en temps réel. Le but est d'afficher le compteur et de le maintenir à jour avec les nouvelles données de l'API.

Scénario 1 : Utilisation de useEffect

Ici, nous utilisons useEffect pour récupérer les données du compteur et gérer l'état manuellement.

importer React, {useState, useEffect } depuis "react";

fonction Compteur() {
const [count, setCount] = useState(null); // Etat pour stocker le compteur
const [chargement, setLoading] = useState(true); // Etat de chargement
const [erreur, setError] = useState(null); // Etat pour la gestion des erreurs

useEffect(() => {
const fetchCounter = async () => {
essayez {
setLoading(true); // Commencer le chargement
const réponse = wait fetch("/api/counter"); // Appel API pour obtenir la valeur du compteur
si (!response.ok) {
throw new Error("Erreur lors de la récupération du compteur");
>
const data = attendre réponse.json();
setCount(data.count); // Définir la valeur du compteur
} attraper (erreur) {
setError(err.message); // Définir l'état d'erreur
} enfin {
setLoading(faux); // Arrêter le chargement
>
};

fetchCounter(); // Fetch the counter on mount

}, []); // Le tableau de dépendances vide signifie qu'il s'exécute une fois lors du montage

if (chargement) return

Chargement...;
si (erreur) renvoie une erreur : {erreur} ;

retour (

Compteur : {count}

);
}

exporter le compteur par défaut ;

Explication :

Gestion des états : nous gérons manuellement trois états : décompte, chargement et erreur.

Récupération de données : la fonction fetchCounter est définie dans le hook useEffect, qui s'exécute lors du montage du composant (tableau de dépendances vide).

Gestion des erreurs et chargement : les états de chargement et d'erreur doivent être traités explicitement.

Récupération : si nous devons récupérer des données (par exemple, lorsque l'utilisateur revisite la page ou si la fenêtre retrouve le focus), nous devons implémenter cette logique manuellement.

Scénario 2 : Utilisation de React Query

Ici, nous utilisons React Query pour simplifier le processus de récupération de données. React Query gère automatiquement la mise en cache, le chargement, les erreurs et la nouvelle récupération.

importer React depuis "react" ;
importer { useQuery } depuis "react-query";

fonction Compteur() {
const { data, error, isLoading } = useQuery("counter", async () => {
const réponse = wait fetch("/api/counter");
si (!response.ok) {
throw new Error("Erreur lors de la récupération du compteur");
>
return réponse.json();
});

if (isLoading) return

Chargement...;
si (erreur) renvoie une erreur : {erreur.message} ;

retour (

Compteur : {data.count}

);
}

exporter le compteur par défaut ;

Explication :

Gestion de l'état : React Query gère automatiquement l'état (chargement, erreur, données). Il n'est pas nécessaire de configurer explicitement des états de chargement ou d'erreur.

Récupération de données : le hook useQuery simplifie la récupération. Il gère automatiquement la mise en cache, les mises à jour en arrière-plan et les tentatives.

Gestion et chargement des erreurs : React Query les gère en interne, et le hook renvoie les états isLoading et d'erreur qui peuvent être utilisés directement dans l'interface utilisateur.

Récupération : React Query récupère automatiquement les données lorsque l'utilisateur revisite la page ou lorsque la fenêtre prend le focus. Il peut également être configuré pour récupérer à intervalles réguliers ou en fonction de conditions personnalisées.

Comparaison des deux approches :

Conclusion :

useEffect est idéal pour gérer les effets secondaires personnalisés ou ponctuels, mais lorsqu'il s'agit de récupération de données, il nécessite une gestion manuelle de l'état et davantage de code passe-partout.

React Query simplifie considérablement la récupération de données en supprimant les tâches courantes telles que le chargement, la gestion des erreurs et la mise en cache. Il est idéal pour les scénarios dans lesquels vous traitez des données qui changent fréquemment ou avez besoin de fonctionnalités telles que la récupération en arrière-plan et la mise en cache.

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!