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

10/12/2024 • Melvynx

Loading...

Content

  • Pourquoi fetch des données ?
  • useEffect + fetch
  • SWR - La solution simple
  • Tanstack Query - La solution complète
  • Conclusion

Reçois une formation gratuite sur nextreact

Courses

  • Formation React
  • Formation JavaScript
  • Formation Tailwind
  • Formation NextJS Full-Stack
  • Formation AI (Cursor / Copilot)
  • Formation HTML/CSS

Products

  • Codeline
  • Chat2Code
  • QuizUp
  • NOW.TS
  • Lumail
  • SaveIt.now
  • PadelTally.com

Popular articles

  • Mon année 2024
  • Mon année 2025
  • All articles

Categories

  • CSSCSS
  • HTMLHTML
  • JavaScriptJavaScript
  • Next.jsNext.js
  • ReactReact
  • TypeScriptTypeScript
codelynx.dev
Terms & Conditions•Privacy Policy•Refund Policy

Copyright © 2025 Codelynx LLC. All rights reserved.

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 on CodeSandboxOpen 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 on CodeSandboxOpen 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 on CodeSandboxOpen 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 on CodeSandboxOpen 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 :

  1. N'utilise pas useEffect + fetch directement, c'est trop complexe à bien faire
  2. 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
  3. 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 :

  • Quand utiliser useEffect
  • Comment utiliser useRef
  • Les formulaires en React
Codelynx.dev
Posts