React Academy · Leçon

Choisir le bon emplacement pour l’état

Appliquer un cadre de décision : état local, état remonté ou état global.

Choisir le bon emplacement pour l’état est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 4 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 React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.

Bienvenue

Dans cette leçon, vous apprendrez à utiliser un cadre de décision pratique pour déterminer si l'état doit appartenir à un seul composant, à un ancêtre commun, à React Context ou à une bibliothèque d'état globale.

Étape 1 : qui utilise cet état ?

Commencez par vous demander quels composants effectuent un rendu à partir de cet état. Dressez-en la liste. Si un seul composant l'utilise, gardez l'état local dans ce composant.

État local

L'état utilisé par exactement un composant réside dans ce composant avec useState. Exemples : déterminer si une liste déroulante est ouverte, connaître la valeur actuelle d'un champ contrôlé ou déterminer si une info-bulle est visible.

function Toggle() {
  const [on, setOn] = useState(false);
  return <button onClick={() => setOn(!on)}>{on ? 'On' : 'Off'}</button>;
}

Étape 2 : trouver l'ancêtre commun

Si plusieurs composants ont besoin de l'état, trouvez leur ancêtre commun le plus proche dans l'arbre des composants. Déplacez-y l'état et transmettez-le sous forme de propriétés.

État remonté (2 à 3 niveaux)

L'état partagé par 2 à 3 composants au même niveau d'imbrication est un bon candidat pour être remonté. Le parent commun en est propriétaire et le transmet par l'intermédiaire des propriétés.

Étape 3 : la transmission en cascade est-elle trop profonde ?

Si l'ancêtre commun se trouve à au moins 4 niveaux au-dessus des consommateurs, transmettre les propriétés à travers des composants intermédiaires crée du bruit. Envisagez Context.

État fourni par Context

Utilisez Context pour les préoccupations transversales dont de nombreux composants de l'arbre ont besoin : l'utilisateur actuellement authentifié, le thème actif ou la langue régionale sélectionnée. Ces éléments changent rarement et ont de nombreux consommateurs.

Étape 4 : l'état est-il complexe ou partagé entre plusieurs pages ?

Si l'état possède une logique de mise à jour complexe, nécessite l'annulation et le rétablissement, doit être conservé lors de la navigation ou est consulté dans des arbres de composants complètement distincts, utilisez une bibliothèque d'état dédiée (Zustand, Redux).

L'état du serveur est différent

Les données récupérées depuis un serveur constituent un *état du serveur*, et non un état d'interface. Ne les stockez pas dans useState ni dans un magasin global : utilisez React Query, SWR ou RTK Query, qui gèrent automatiquement la mise en cache, la nouvelle récupération et les états d'erreur.

L'organigramme de décision

1 consommateur → useState local. 2 à 3 consommateurs à une profondeur similaire → remonter l'état dans le parent. Au moins 4 niveaux de transmission en cascade → Context. Logique complexe ou entre plusieurs arbres → Zustand/Redux. Données du serveur → React Query/SWR.

Vérification rapide

Quel emplacement d'état est le plus approprié pour l'utilisateur actuellement authentifié auquel de nombreux composants d'une grande application doivent accéder ?

Récapitulatif

Adaptez l'emplacement de l'état à ses consommateurs : local pour un seul, remonté pour quelques consommateurs proches, Context pour de nombreux consommateurs répartis sur plusieurs niveaux, bibliothèque d'état pour un état complexe ou partagé entre plusieurs arbres, React Query pour les données du serveur.

Cours terminé

Félicitations ! Vous avez terminé **Remonter l'état et résoudre la transmission en cascade des propriétés**. Vous disposez désormais d'un cadre clair pour décider où l'état doit résider et comment le partager correctement.

Questions Fréquemment Posées

La leçon « Choisir le bon emplacement pour l’état » est-elle gratuite ?

Oui — le texte complet de « Choisir le bon emplacement pour l’état » 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 React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Choisir le bon emplacement pour l’état » ?

Appliquer un cadre de décision : état local, état remonté ou état global. Tu pratiques React 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 React Academy ?

Aucune expérience préalable n'est requise. React 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 4 sur 4.

Combien de temps prend la leçon « Choisir le bon emplacement pour l’état » ?

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 React Academy ?

Oui. Chaque leçon React 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

Remonter l’état : principes et exemples
Prop drilling : quand il pose problème et quand il convient
Schémas de communication entre composants frères
Choisir le bon emplacement pour l’état

← Retour à React Academy