0Pricing
React Academy · Leçon

Remonter l’état : principes et exemples

Déplacer l’état partagé vers l’ancêtre commun le plus proche et le transmettre via les props.

Remonter l’état : principes et exemples est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 1 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 découvrirez le modèle de remontée de l'état : déplacer l'état partagé vers l'ancêtre commun le plus proche afin que les composants frères restent synchronisés.

Le problème : des composants frères désynchronisés

Lorsque deux composants frères ont besoin des mêmes données, conserver un état distinct dans chacun d'eux entraîne des erreurs de synchronisation. La solution consiste à déplacer l'état vers leur parent commun.

Identifier l'ancêtre commun

Trouvez le composant le plus proche qui est le parent des **deux** composants ayant besoin des données partagées. Déplacez-y l'état et transmettez-le sous forme de propriétés.
function Parent() {
  const [value, setValue] = useState('');
  return (
    <>
      <InputA value={value} onChange={setValue} />
      <PreviewB value={value} />
    </>
  );
}

Exemple de remontée d'un compteur

Supposons que deux composants affichent le même compteur. Au lieu de gérer count dans chacun d'eux, remontez-le vers leur parent. Tous deux reçoivent count comme propriété et appellent une fonction de rappel onChange pour le mettre à jour.
function App() {
  const [count, setCount] = useState(0);
  return (
    <>
      <CounterDisplay count={count} />
      <CounterControl count={count} onIncrement={() => setCount(c => c + 1)} />
    </>
  );
}

Propriétés de rappel pour les mises à jour

Les enfants ne peuvent pas modifier directement l'état du parent. Le parent transmet une fonction de rappel, comme `onChange`, sous forme de propriété. Les enfants appellent cette fonction lorsqu'ils veulent demander une modification de l'état.

Contrôlé ou non contrôlé après la remontée

Après la remontée de l'état, l'enfant qui le possédait auparavant devient un **composant contrôlé** : il reçoit la valeur actuelle et onChange de son parent. Le parent est la source unique de vérité.

Remontée sur plusieurs niveaux

Vous devez parfois remonter l'état de plusieurs niveaux dans l'arbre. Si l'état doit être remonté au-delà de nombreux composants intermédiaires, envisagez plutôt le contexte afin d'éviter de faire transiter les propriétés de composant en composant.

Avantages de la remontée de l'état

La remontée de l'état vous donne une source unique de vérité, rend le flux de données prévisible, toujours du parent vers les enfants, simplifie le débogage et facilite l'ajout ultérieur d'autres consommateurs du même état.

État dérivé de l'état remonté

Calculez les valeurs dérivées de l'état remonté dans le parent et transmettez-les comme propriétés supplémentaires. Ne dupliquez jamais l'état : déduisez-le.
const [items, setItems] = useState([]);
const filteredItems = items.filter(i => i.done); // derived, not separate state

Quand la remontée devient excessive

Si vous constatez que vous devez remonter l'état sur au moins quatre niveaux, la structure de l'arbre des composants est peut-être incorrecte, ou il est temps d'utiliser le contexte ou une bibliothèque de gestion d'état.

Question rapide

Quelle est la bonne approche lorsque deux composants frères doivent partager le même état ?

Récapitulatif

Remontez l'état vers l'ancêtre commun le plus proche lorsque des composants frères doivent le partager. Transmettez la valeur actuelle vers le bas et les fonctions de rappel de modification vers le haut. Déduisez les valeurs au lieu de dupliquer l'état.

À suivre

Prochaine leçon : **La transmission en cascade des propriétés : quand elle pose problème et quand elle convient** — vous identifierez les chaînes de transmission problématiques et déterminerez quand elles nécessitent une solution.

Questions Fréquemment Posées

La leçon « Remonter l’état : principes et exemples » est-elle gratuite ?

Oui — le texte complet de « Remonter l’état : principes et exemples » 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 « Remonter l’état : principes et exemples » ?

Déplacer l’état partagé vers l’ancêtre commun le plus proche et le transmettre via les props. 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 1 sur 4.

Combien de temps prend la leçon « Remonter l’état : principes et exemples » ?

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

  1. Remonter l’état : principes et exemples
  2. Prop drilling : quand il pose problème et quand il convient
  3. Schémas de communication entre composants frères
  4. Choisir le bon emplacement pour l’état
← Retour à React Academy