Récupérer des données au montage
Récupérez du JSON depuis une API dans useEffect, stockez la réponse dans l’état et ne déclenchez la récupération qu’une seule fois avec un tableau de dépendances vide.
Récupérer des données au montage est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
Le modèle de récupération des données
Le modèle standard de récupération de données dans React consiste à : 1) définir l’état du chargement, des erreurs et des données ; 2) récupérer les données dans useEffect avec un tableau de dépendances vide [] ; 3) mettre à jour l’état dans la fonction de rappel ; 4) effectuer le rendu en fonction de l’état.
Exemple complet
Un exemple complet qui récupère les utilisateurs au montage, avec gestion du chargement et des erreurs.
interface User { id: number; name: string; email: string; }
function UserList() {
const [users, setUsers] = useState<User[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
fetch('/api/users')
.then(res => {
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return res.json();
})
.then(data => setUsers(data))
.catch(err => setError(err.message))
.finally(() => setLoading(false));
}, []);
if (loading) return <Spinner />;
if (error) return <ErrorMessage message={error} />;
return <ul>{users.map(u => <UserItem key={u.id} {...u} />)}</ul>;
}Utiliser async/await dans useEffect
La fonction de rappel de useEffect ne peut pas être directement asynchrone : elle retournerait une promesse que React interpréterait comme une fonction de nettoyage. Définissez plutôt une fonction asynchrone interne et appelez-la immédiatement.
useEffect(() => {
async function fetchUsers() {
try {
const res = await fetch('/api/users');
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const data = await res.json();
setUsers(data);
} catch (err) {
setError((err as Error).message);
} finally {
setLoading(false);
}
}
fetchUsers();
}, []);Vérifier l’état de la réponse
fetch ne lève pas d’exception pour les erreurs HTTP (4xx, 5xx), mais uniquement en cas d’échec réseau. Vérifiez toujours response.ok et levez manuellement une exception pour les réponses en erreur.
const res = await fetch('/api/data');
if (!res.ok) {
// Could also use res.status for specific handling
throw new Error(`Server responded ${res.status}: ${res.statusText}`);
}
const data = await res.json();Récupérer des données lorsqu’une dépendance change
Ajoutez la dépendance (par exemple un identifiant provenant des paramètres de route ou des propriétés) au tableau de dépendances de l’effet. L’effet s’exécute de nouveau et récupère des données à jour chaque fois que la dépendance change.
const { userId } = useParams();
useEffect(() => {
if (!userId) return;
setLoading(true);
fetch(`/api/users/${userId}`)
.then(r => r.json())
.then(setUser)
.finally(() => setLoading(false));
}, [userId]);Requêtes POST dans les effets
Les effets peuvent également envoyer des requêtes POST/PUT/DELETE, mais celles-ci sont généralement déclenchées par des événements (envoi d’un formulaire, clic sur un bouton), et non par des effets exécutés au montage. Réservez les effets au chargement des données et utilisez des gestionnaires d’événements pour les mutations.
Hook useFetch personnalisé
Extrayez le modèle récupération + chargement + erreur dans un hook personnalisé afin de le réutiliser entre les composants.
function useFetch<T>(url: string) {
const [data, setData] = useState<T | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
setLoading(true);
fetch(url)
.then(r => { if (!r.ok) throw new Error(`${r.status}`); return r.json(); })
.then(setData)
.catch(e => setError(e.message))
.finally(() => setLoading(false));
}, [url]);
return { data, loading, error };
}Analyser le JSON en toute sécurité
Entourez toujours res.json() d’un bloc try/catch : un JSON malformé lève une SyntaxError. Le bloc catch externe la traitera, mais connaître son origine facilite le débogage.
Configuration de l’URL de base de l’API
Ne codez pas les URL d’API en dur. Utilisez des variables d’environnement (import.meta.env.VITE_API_URL) pour l’URL de base. Créez un fichier api.ts central contenant une enveloppe fetch configurée.
const API_BASE = import.meta.env.VITE_API_URL;
async function apiFetch<T>(path: string): Promise<T> {
const res = await fetch(`${API_BASE}${path}`, {
headers: { 'Authorization': `Bearer ${getToken()}` }
});
if (!res.ok) throw new Error(`API error ${res.status}`);
return res.json();
}Quand passer à React Query
Les modèles de récupération manuelle conviennent aux cas simples. Lorsque vous avez besoin de mise en cache, de nouvelles récupérations en arrière-plan, de pagination ou de mutations, passez à React Query (TanStack Query) : il gère tous ces modèles de manière fiable.
Afficher un squelette de chargement
Au lieu d’un indicateur de chargement, affichez une interface squelette qui reprend la forme du contenu chargé. Cela réduit le temps de chargement perçu et évite les décalages de mise en page.
Vérification rapide
Pourquoi ne pouvez-vous pas rendre directement asynchrone la fonction de rappel de useEffect ?
Récapitulatif : récupération de données dans useEffect
Définissez l’état du chargement, des erreurs et des données. Récupérez les données dans useEffect avec un tableau de dépendances vide []. Définissez une fonction asynchrone interne : ne rendez pas la fonction de rappel asynchrone. Vérifiez toujours res.ok. Ajoutez l’URL ou l’identifiant aux dépendances pour les récupérations dynamiques. Extrayez le modèle dans un hook personnalisé useFetch pour le réutiliser. Envisagez TanStack Query pour la récupération de données en production.
Questions Fréquemment Posées
La leçon « Récupérer des données au montage » est-elle gratuite ?
Oui — le texte complet de « Récupérer des données au montage » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Récupérer des données au montage » ?
Récupérez du JSON depuis une API dans useEffect, stockez la réponse dans l’état et ne déclenchez la récupération qu’une seule fois avec un tableau de dépendances vide. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Frontend Academy ?
Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « Récupérer des données au montage » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?
Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Bases de useEffect : dépendances et nettoyage
- Récupérer des données au montage
- Gérer les états de chargement et d’erreur
- AbortController pour le nettoyage