Qu'est-ce que cela signifie de remonter l'état ?

Question

Accepted Answer

**Remonter l'état** signifie déplacer l'état d'un composant enfant à un **parent commun** afin que plusieurs enfants puissent partager et rester synchronisés avec les mêmes données. C'est la solution standard quand les composants frères ont besoin de se coordonner. ## Le problème : les frères ont besoin de données partagées ```jsx // ❌ each child has its OWN state — they can't sync function TempInput() { const [temp, setTemp] = useState(0); ... } // Two sibling TempInputs (Celsius & Fahrenheit) can't see each other's value ``` Si deux composants frères ont chacun leur propre copie d'un état lié, il n'y a aucun moyen pour eux de rester cohérents — changer l'un n'affecte pas l'autre. ## La solution : remonter l'état au parent ```jsx function Calculator() { const [temperature, setTemperature] = useState(0); // state LIFTED to the parent return ( <> {/* pass state DOWN as a prop, and a setter to update it */}

Both inputs share one value: {temperature}

); } function TempInput({ value, onChange }) { return onChange(e.target.value)} />; } ``` L'état partagé vit maintenant dans le parent (`Calculator`). Il passe la valeur *vers le bas* en tant que prop et un setter afin que les enfants puissent demander des changements (*vers le haut*). Maintenant, les deux entrées reflètent la même source — éditer l'une met à jour les deux. ## Le modèle ```text 1. Find the closest COMMON ancestor of the components that need to share 2. Move the state UP into that ancestor 3. Pass the value DOWN as props 4. Pass a callback DOWN so children can request updates (data up via events) ``` C'est le même flux « données vers le bas, événements vers le haut », appliqué pour rendre l'état partagé. ## Quand la remontée devient trop importante ```text Lifting too high (state ends up far from where it's used) → prop drilling. At that point, prefer Context or a state library instead of lifting further. ``` ## Pourquoi c'est important Remonter l'état est la technique fondamentale pour **partager l'état entre composants frères/liés** dans les frameworks basés sur les composants — cela maintient une source unique de vérité dans un parent commun afin que les enfants restent synchronisés. C'est souvent le *premier* outil à utiliser avant d'ajouter Context ou un store. Reconnaître quand remonter (les frères ont besoin de se coordonner) — et quand la remontée a trop progressé (causant du prop drilling, donc il est temps d'utiliser Context/un store) — est fondamental pour bien structurer l'état des composants.