Comment gérez-vous les réseaux et les APIs dans React Native?

Question

Accepted Answer

Les applications React Native appellent fréquemment des **APIs** — en utilisant le **fetch** intégré (ou **axios**), async/await, et en gérant les réponses, les erreurs et les états de chargement. La mise en réseau fonctionne comme en JavaScript web, souvent combinée avec React Query pour la mise en cache. ## Effectuer des requêtes avec fetch ```jsx // fetch is built-in (like the web); use async/await async function getUsers() { try { const response = await fetch('https://api.example.com/users'); if (!response.ok) throw new Error('Request failed'); // check status const data = await response.json(); // parse JSON return data; } catch (error) { console.error(error); // handle errors throw error; } } ``` `fetch` (intégré) effectue des requêtes HTTP ; `await response.json()` analyse le JSON ; vérifier `response.ok` et try/catch gèrent les erreurs. `axios` est une alternative populaire (intercepteurs, API plus agréable). ## Gérer les états de chargement/erreur/données ```jsx function Users() { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { getUsers().then(setData).catch(setError).finally(() => setLoading(false)); }, []); if (loading) return ; // loading spinner if (error) return Error; // error UI return ; // show data } ``` Les applications doivent gérer les états **chargement, erreur et données** pour une bonne UX (spinner pendant le chargement, message d'erreur en cas d'échec, données en cas de succès). ## React Query (recommandé pour les données serveur) ```text → React Query / TanStack Query handles fetching + CACHING + loading/error states + refetching + sync automatically → much less boilerplate than manual useState/useEffect → Recommended for managing server data (vs hand-rolling every fetch) ``` ## Pourquoi c'est important Comprendre la mise en réseau et les APIs dans React Native est essentiel car **la plupart des applications communiquent avec des serveurs dorsaux** — récupérer et envoyer des données est un besoin quasi universel, donc c'est une connaissance pratique incontournable. Les applications font constamment des appels API (charger des données, soumettre des formulaires, authentification), et la mise en réseau React Native fonctionne comme JavaScript web (un avantage pour les développeurs web). Comprendre **effectuer des requêtes** (le `fetch` intégré ou `axios`, avec async/await, analyser le JSON et vérifier les codes d'état) et **gérer les erreurs** (try/catch, vérifier `response.ok`) est la compétence fondamentale, car les appels réseau sont fondamentaux et échouent couramment. Critiquement, comprendre comment **gérer les états de chargement, erreur et données** est essentiel pour une bonne UX : afficher un spinner de chargement (ActivityIndicator) pendant la récupération, un message d'erreur en cas d'échec, et les données en cas de succès — gérer correctement ces états est ce qui rend les applications polies plutôt que cassées (un écran vide pendant le chargement, ou un plantage en cas d'erreur, c'est une mauvaise UX). Comprendre **React Query/TanStack Query** est de plus en plus précieux : il gère la récupération, la **mise en cache**, les états de chargement/erreur, le rechargement et la synchronisation automatiquement, réduisant considérablement le code passe-partout de gérer manuellement chaque fetch avec useState/useEffect — et c'est l'**approche recommandée pour les données serveur** dans React Native moderne, reflétant la reconnaissance que les données serveur bénéficient d'une gestion dédiée (mise en cache, synchronisation). Commeles la plupart des applications React Native communiquent avec des APIs (un besoin quasi universel) et le faire bien (fetch/axios, gestion des erreurs, et notamment gérer les états de chargement/erreur/données pour une bonne UX, idéalement avec React Query pour la mise en cache) est essentiel pour des applications fonctionnelles et polies, comprendre la mise en réseau et les APIs dans React Native est une connaissance pratique essentielle et fréquemment appliquée — une compétence fondamentale nécessaire dans pratiquement chaque application réelle qui récupère des données, centrale à la création d'applications qui affichent de manière fiable et fluide des données serveur, React Query étant l'approche recommandée moderne pour gérer les données serveur.