De useEffect à React Query : moderniser la gestion de vos données dans React

Dans le paysage moderne du développement Web, la création d'applications rapides et réactives qui gèrent efficacement les données côté serveur est plus cruciale que jamais. Les méthodes traditionnelles de récupération de données dans React, en particulier à l'aide de useEffect, peuvent souvent conduire à une gestion d'état complexe, à un code répétitif et à des problèmes de performances. Avec React Query, les développeurs peuvent profiter de fonctionnalités telles que la mise en cache automatique, la récupération en arrière-plan et la prise en charge intégrée des mutations, tout en minimisant le code passe-partout.

Dans cet article, nous explorerons les concepts de base de React Query, démontrerons comment l'intégrer dans nos projets et mettrons en évidence ses fonctionnalités puissantes qui peuvent améliorer considérablement votre flux de travail de développement. Préparez-vous à transformer la façon dont vous récupérez, mettez en cache et synchronisez les données dans vos applications React !

Pourquoi devrions-nous arrêter de récupérer des données à l'aide de React Effects

Bien que l'utilisation de useEffect de React pour la récupération de données soit parfaitement valable, il y a plusieurs raisons d'envisager de s'en éloigner au profit d'une bibliothèque dédiée à la récupération de données comme React Query (même la documentation de React suggère d'utiliser React Query pour la récupération de données).

Quelques inconvénients liés à l'utilisation d'Effets pour la récupération de données :

• Problèmes de performances : les « cascades de réseau » et les récupérations inutiles sont quelques-uns des problèmes courants lors de l'utilisation de React useEffect et peuvent conduire à une très mauvaise expérience utilisateur.
• Manque de mise en cache intégrée : useEffect ne fournit pas de mise en cache prête à l'emploi, ce qui entraîne des requêtes réseau répétées et des solutions complexes pour la gérer.
• Complexité dans la gestion des états : la gestion manuelle des états de chargement, d'erreur et de données avec useEffect peut conduire à un code fastidieux et sujet aux erreurs, en particulier à mesure que l'application évolue.
• Les effets ne s'exécutent pas sur le serveur : les données peuvent ne pas être disponibles lors du rendu initial du composant.

Comment fonctionne React Query

React Query est une bibliothèque puissante conçue pour simplifier la récupération de données et la gestion des états dans les applications React. Voici un aperçu du fonctionnement de React Query :

1. Interrogation de données

• hook useQuery : Le cœur de React Query est le hook useQuery. Ce hook permet de récupérer des données sur un serveur et de gérer automatiquement son état (chargement, erreur, données…).
• Clé de requête : Chaque requête est identifiée par une clé unique (une ou plusieurs chaînes dans un tableau). Cette clé aide React Query à mettre en cache et à gérer les données efficacement.

2. Mise en cache

• Mise en cache automatique : lorsque les données sont récupérées, React Query les met en cache. Si la même requête est répétée, elle récupère les données du cache au lieu de faire une nouvelle requête réseau.
• Gestion des données périmées : vous pouvez définir la durée pendant laquelle les données doivent être considérées comme fraîches (et non périmées). Après cette période, React Query récupérera les données en arrière-plan.

3. Récupération en arrière-plan

React Query récupère automatiquement les données dans plusieurs scénarios pour garder les données à jour et synchronisées. Voici les principales situations dans lesquelles cela se produit :

• Montage de composants : Lorsqu'un composant se monte, si les données sont considérées comme obsolètes.
• Fenêtre focus : chaque fois que la fenêtre retrouve le focus, par exemple lorsqu'un utilisateur bascule entre les onglets ou les fenêtres et revient à celle contenant votre application.
• Reconnexion au réseau : Si la connexion réseau est perdue puis restaurée.

4. Mutations de données

• useMutation Hook : il fait référence au processus de création, de mise à jour ou de suppression de données sur le serveur. Contrairement aux requêtes, qui récupèrent des données, useMutation est utilisée pour modifier les données et gérer les effets secondaires qui y sont associés.
• Mises à jour optimistes : lorsqu'un utilisateur effectue une action qui entraînera une mutation des données, l'interface utilisateur est immédiatement mise à jour pour refléter le résultat attendu de cette action, améliorant ainsi l'expérience utilisateur.

5. Invalidation de la requête

• React Query vous permet de marquer une requête mise en cache comme « périmée » afin qu'elle soit récupérée lors de son prochain accès. Ceci est essentiel pour garantir que l'interface utilisateur reflète les données les plus récentes du serveur après certaines actions, telles que des mutations ou des interactions utilisateur.

6. Collecte automatique des déchets

• React Query supprime automatiquement les requêtes de son cache lorsqu'elles ne sont plus utilisées et sont inactives depuis une certaine période. Ce processus permet d'éviter les fuites de mémoire et garantit que seules les données pertinentes restent dans le cache.

7. Outils de développement

• React Query DevTools est un outil facultatif et convivial pour React Query qui nous aide, nous les développeurs, à déboguer et à surveiller les requêtes, les mutations et l'état du cache. Il fournit une interface visuelle pour inspecter les détails de nos requêtes et voir comment React Query gère leur cycle de vie.

8. Rendu côté serveur (SSR)

• React Query prend en charge le rendu côté serveur (SSR), qui permet de pré-récupérer les données sur le serveur avant de les envoyer au client. Cela accélère le chargement initial de la page et peut améliorer le référencement en proposant une page entièrement rendue aux moteurs de recherche.

Comment implémenter React Query

Voici un guide étape par étape sur la façon d'utiliser React Query pour gérer la récupération, la mise en cache, la mise à jour et la synchronisation des données du serveur dans une application React.

Étape 1 : Installer React Query

Tout d'abord, ajoutez React Query à votre projet :

npm install @tanstack/react-query

Étape 2 : configurer QueryClientProvider

Pour configurer React Query, enveloppez votre application dans un QueryClientProvider. Ce fournisseur utilise une instance QueryClient, qui gère la mise en cache, la récupération en arrière-plan et les mises à jour.

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <YourComponent />
    </QueryClientProvider>
  );
}

Étape 3 : Récupérer des données avec useQuery

Le hook useQuery récupère les données d'une API, les met automatiquement en cache et gère les états tels que le chargement et les erreurs.

npm install @tanstack/react-query

• Clé (['todos']) : chaque useQuery nécessite une clé unique pour identifier et mettre en cache les données.
• Fonction de requête (fetchTodos) : cette fonction asynchrone récupère les données dont vous avez besoin à partir d'une API.

Étape 4 : Gérer les mutations de données avec useMutation

Le hook useMutation est utilisé pour créer, mettre à jour ou supprimer des données. Une fois la mutation réussie, vous pouvez utiliser l'invalidation de requête pour récupérer les données pertinentes et maintenir l'état de votre application à jour.

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <YourComponent />
    </QueryClientProvider>
  );
}

• Fonction de mutation (addTodo) : Cette fonction asynchrone modifie l'état du serveur.
• onSuccess : après une mutation, ce rappel invalide la requête ['todos'], récupérant et mettant à jour les données pour afficher la tâche nouvellement ajoutée.

Étape 5 : DevTools facultatifs pour le débogage

React Query DevTools peut vous aider à surveiller les requêtes, l'état du cache et bien plus encore pendant le développement :

import { useQuery } from '@tanstack/react-query';

function YourComponent() {
  const { data, error, isLoading } = useQuery(['todos'], fetchTodos);

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      {data.map((todo) => (
        <p key={todo.id}>{todo.title}</p>
      ))}
    </div>
  );
}

// Sample fetch function
const fetchTodos = async () => {
  const response = await fetch('/api/todos');
  return response.json();
};

Ensuite, ajoutez à votre application :

import { useMutation, useQueryClient } from '@tanstack/react-query';

function TodoAdder() {
  const queryClient = useQueryClient();
  const addTodoMutation = useMutation(addTodo, {
    onSuccess: () => {
      queryClient.invalidateQueries(['todos']);
    },
  });

  return (
    <button onClick={() => addTodoMutation.mutate({ title: 'New Todo' })}>
      Add Todo
    </button>
  );
}

const addTodo = async (newTodo) => {
  const response = await fetch('/api/todos', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(newTodo),
  });
  return response.json();
};

Conclusion

Remplacer useEffect par React Query pour la récupération de données et les effets secondaires est une excellente recommandation pour créer des applications React modernes.

React Query transforme la façon dont vous gérez les données côté serveur dans les applications React, en offrant une approche plus déclarative qui simplifie la gestion des états complexes. En tirant parti de ses fonctionnalités puissantes telles que la mise en cache, la synchronisation en arrière-plan et l'invalidation des requêtes, vous pouvez créer des applications hautement réactives et performantes. Enfin, l’intégration de React Query DevTools facilite la surveillance et le débogage, garantissant ainsi que le flux de données de votre application est fluide et transparent.

Que vous créiez une application simple d'une seule page ou une application complexe gourmande en données, React Query vous permet de créer des applications plus rapides, plus intelligentes et plus conviviales avec moins d'effort.

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!