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;
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;
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;
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;
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.
Si tu veux approfondir tes connaissances React, je te conseille de lire :