Compréhension SWR

Etat de la Machine

useSWR renvoie data, error, isLoading, et isValidating, en fonction de l'état de la fonction fetcher. Ces diagrammes décrivent comment SWR renvoie ces valeurs dans plusieurs scénarios.

Récupération et Revalidation

Ce diagramme montre la récupéreration des données et la revalidation plus tard.

Changement de Clé

Ce diagramme montre la récupération des données et le changement de clé plus tard.

Changement de Clé + Données Précédentes

Ce diagramme montre la récupération des données et le changement de clé plus tard avec l'option keepPreviousData.

Repli

Ce diagramme montre la récupération des données et la revalidation plus tard avec les données de repli.

Changement de Clé + Repli

Ce diagramme montre la récupération des données et le changement de clé plus tard avec les données de repli.

Changement de Clé + Données Précédentes + Repli

Ce diagramme montre la récupération des données et le changement de clé plus tard avec les données de repli et l'option keepPreviousData.

Combiner isLoading et isValidating pour une meilleure UX

Comparé à la valeur existante isValidating, isLoading est une nouvelle propriété qui peut vous aider pour les cas de chargement plus généraux pour l'UX.

• isValidating devient true à chaque fois qu'il y a une requête en cours que les données soient chargées ou non
• isLoading devient true lorsqu'il y a une requête en cours et que les données ne sont pas encore chargées.

En d'autres termes, isLoading est une propriété plus spécifique pour indiquer que les données ne sont pas encore chargées. isValidating est une propriété plus générale pour indiquer qu'il y a une revalidation en cours, que les données soient chargées ou non.

function Stock() {
  const { data, isLoading, isValidating } = useSWR(STOCK_API, fetcher, {
    refreshInterval: 3000
  });
 
  // Si les données initiales sont toujours en cours de chargement, il n'y a rien à afficher.
  // Nous retournons un squelette ici.
  if (isLoading) return <div className="skeleton" />;
 
  // Sinon, nous affichons les données et un spinner qui indique une revalidation en arrière-plan.
  return (
    <>
      <div>${data}</div>
      {isValidating ? <div className="spinner" /> : null}
    </>
  );
}

Vous pouvez trouver l'exemple ici (opens in a new tab)

Renvoi de données précédentes pour une meilleure UX

Lors de la récupération de données basée sur des actions utilisateurs, par exemple une recherche en temps réel, garder les données précédentes peut aléliorer l'UX. keepPreviousData est une option pour activer ce comportement. Voici une simple interface de recherche :

function Search() {
  const [search, setSearch] = React.useState('');
 
  const { data, isLoading } = useSWR(`/search?q=${search}`, fetcher, {
    keepPreviousData: true
  });
 
  return (
    <div>
      <input
        type="text"
        value={search}
        onChange={(e) => setSearch(e.target.value)}
        placeholder="Rechercher..."
      />
 
      <div className={isLoading ? "chargement" : ""}>
        {data?.products.map(item => <Product key={item.id} name={item.name} />)}
      </div>
    </div>
  );
}

Avec keepPreviousData activé, vous obtiendrez toujours les données précédentes même si vous changez la clé SWR et que les données pour la nouvelle clé commencent à se charger à nouveau.

Vous pouvez trouver l'exemple ici (opens in a new tab).

Collection de dépendances pour les performances

SWR ne déclenche le re-rendering que lorsque les états utilisés dans le composant ont été mis à jour. Si vous n'utilisez que data dans le composant, SWR ignore les mises à jour des autres propriétés comme isValidating et isLoading. Cela réduit considérablement le nombre de rendus. Vous pouvez trouver plus d'informations ici.