Fetch des données en React - Le guide ultime pour bien faire

10/12/2024 • Melvynx

Le fetch de données est une partie essentielle de toute application web moderne. Dans ce guide, je vais t'expliquer les différentes méthodes pour fetch des données en React, leurs avantages et inconvénients.

Pourquoi fetch des données ?

Quasiment toutes les applications web ont besoin de récupérer des données depuis une API. Que ce soit pour afficher :

Une liste d'articles
Les informations d'un utilisateur
Des données en temps réel
Des statistiques

Le fetch de données est partout ! Mais comment bien le faire en React ?

useEffect + fetch

La première approche, celle que tout le monde utilise au début, c'est d'utiliser useEffect avec fetch. Si tu ne connais pas bien useEffect, je te conseille de lire mon article sur useEffect.

Voici un exemple simple :

import React, { useState, useEffect } from 'react';

const FetchName = () => {
const [age, setAge] = useState(null);

useEffect(() => {
  const fetchAge = async () => {
    const response = await fetch('https://api.agify.io?name=john');
    const data = await response.json();
    setAge(data.age);
  };

  fetchAge();
}, []);

return <div>Age estimé pour John : {age}</div>;
};

export default FetchName;

Open Sandbox

Ce code est simple mais il a plusieurs problèmes :

Pas de gestion d'erreur
Pas d'état de chargement
Pas d'annulation des requêtes (memory leak)
Pas de cache
Pas de revalidation

Dans une grosse application, on ne peut pas vraiment se passer de ce genre de fonctionnalités. Pour les avoir, on va pouvoir avoir un code du genre :

import React, { useState, useEffect } from 'react';

const FetchName = () => {
const [age, setAge] = useState(null);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
  const abortController = new AbortController();

  const fetchAge = async () => {
    try {
      setIsLoading(true);
      setError(null);

      const response = await fetch('https://api.agify.io?name=john', {
        signal: abortController.signal
      });

      if (!response.ok) {
        throw new Error('Erreur lors du fetch');
      }

      const data = await response.json();
      setAge(data.age);
    } catch (err) {
      if (err.name === 'AbortError') return;
      setError(err.message);
    } finally {
      setIsLoading(false);
    }
  };

  fetchAge();

  return () => {
    abortController.abort();
  };

}, []);

if (isLoading) return <div>Chargement...</div>;
if (error) return <div>Erreur : {error}</div>;

return <div>Age estimé pour John : {age}</div>;
};

export default FetchName;

Open Sandbox

Ce code est beaucoup plus complet mais :

Il est très verbeux
Il faut répéter cette logique pour chaque fetch
Il manque encore des fonctionnalités (cache, revalidation, etc.)

Pour résoudre ce problème, on va utiliser des librairies qui permettent de gérer ça pour nous sans avoir besoin de se soucier de tout ça.

SWR - La solution simple

SWR est une librairie créée par Vercel qui simplifie énormément le fetch de données. Voici le même exemple avec SWR :

import useSWR from 'swr'

const fetcher = url => fetch(url).then(r => r.json())

const FetchName = () => {
const { data, error, isLoading } = useSWR(
  'https://api.agify.io?name=john',
  fetcher
)

if (error) return <div>Erreur de chargement</div>
if (isLoading) return <div>Chargement...</div>

return <div>Age estimé pour John : {data.age}</div>
}

export default FetchName;

Open Sandbox

Avantages de SWR :

Code très concis
Gestion automatique du cache
Revalidation automatique
Gestion des erreurs simplifiée
Optimisé pour Next.js

Tanstack Query - La solution complète

Tanstack Query (anciennement React Query) est la solution la plus complète pour gérer le fetch de données en React.

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

const queryClient = new QueryClient()

const FetchName = () => {
const { data, error, isLoading } = useQuery({
  queryKey: ['age', 'john'],
  queryFn: () =>
    fetch('https://api.agify.io?name=john')
      .then(res => res.json())
})

if (isLoading) return <div>Chargement...</div>
if (error) return <div>Erreur : {error.message}</div>

return <div>Age estimé pour John : {data.age}</div>
}

const App = () => {
return (
  <QueryClientProvider client={queryClient}>
    <FetchName />
  </QueryClientProvider>
)
}

export default App;

Open Sandbox

Tanstack Query offre encore plus de fonctionnalités : - Gestion avancée du cache - Invalidation du cache - Mutations optimistes - Prefetching - DevTools intégrés - Support TypeScript natif

Conclusion

Pour résumer, voici mes recommandations :

N'utilise pas useEffect + fetch directement, c'est trop complexe à bien faire
Utilise SWR si tu travailles avec Next.js et que tu veux une solution simple car tu ne fais pas beaucoup de fetch des données
Utilise Tanstack Query si tu veux une solution complète et que tu as besoin de fonctionnalités avancées

En règle général, il n'y a pas besoin de réfléchir :

Utilise toujours Tanstack Query !

C'est de loin la meilleure solution dans la majorité des cas.

Reçois une formation Next.js gratuite

Maîtrise le développement fullstack avec Next.js et React

Si tu veux approfondir tes connaissances React, je te conseille de lire :