4.13 élever l'état
Dans ce cours, nous abordons un concept fondamental de React : élever l'état (en anglais lifting state up). Quand un composant appelle une fonction reçue via ses props et lui transmet des données, il ne « soulève » pas l'état tout seul : il déclenche simplement un mécanisme de communication. Mais en transmettant les données extraites du formulaire vers le parent, nous arrêtons de stocker l'état dans le composant enfant pour le déplacer vers un ancêtre commun.
Pourquoi remonter l'état ?
Concrètement, nous ne conservons plus les données saisies dans NewExpense. À la place, nous les soulevons jusqu'à App.js où nous pouvons les manipuler via un handler addExpenseHandler. Pour le moment, on se contente de les loguer dans la console, mais bientôt nous les utiliserons pour mettre à jour la liste affichée.
Important à noter : NewExpense n'est pas le composant qui génère les données. C'est ExpenseForm qui récupère les entrées utilisateur, les stocke avec useState, puis les transmet à NewExpense via une prop fonction. Et NewExpense les transmet à son tour à App. L'état remonte donc de niveau en niveau.
Pourquoi élever jusqu'à App ? Parce que c'est le premier composant ancêtre qui a accès à la fois à NewExpense (la source des nouvelles données) et à Expenses (qui doit afficher la liste mise à jour). En centralisant l'état dans le parent commun, on peut le redistribuer aux deux composants enfants. C'est exactement la logique du lifting state up.
Vous allez retrouver ce pattern très souvent dans vos applications React : dès que deux composants frères doivent partager une donnée, on élève l'état vers leur ancêtre commun le plus proche. On se retrouve dans le prochain cours pour explorer les composants contrôlés.
En résumé
Élever l'état (state lifting) consiste à remonter les données depuis un composant enfant vers un composant parent via des fonctions de rappel (callbacks) reçues en tant que props. Plutôt que de conserver les données là où elles sont générées (par exemple dans le composant ExpenseForm), on les transmet au composant parent qui en devient responsable. Ce pattern permet au composant parent (comme Application) d'accéder aux données des différents enfants et d'en gérer l'état de manière centralisée.
Points clés
- Le composant qui génère les données (ExpenseForm) ne doit pas les conserver localement, mais les transmettre au parent via une fonction callback
- L'état remonté vers le parent Application permet d'accéder simultanément aux données du composant de formulaire et du composant d'affichage des dépenses
- Ce pattern de lifting state est fondamental en React et s'utilise très fréquemment tout au long du développement d'applications
- Les données circulent de haut en bas via les props, et les mises à jour remontent via les callbacks
- Le composant parent Application devient le point central qui gère l'état et le partage entre ses enfants
Questions fréquentes
Pourquoi ne pas garder les données dans le composant qui les génère ?
Parce que d'autres composants frères en auraient besoin (comme le composant d'affichage des dépenses). En remontant l'état au parent commun, on rend les données accessibles à tous les enfants qui en ont besoin.
Jusqu'où faut-il remonter l'état ?
L'état doit remonter jusqu'au composant parent commun le plus proche de tous les composants qui ont besoin de partager ces données. Si c'est un formulaire et un affichage, il remonte jusqu'au composant qui les contient tous deux.
Comment les données reviennent-elles au parent quand elles sont générées dans un enfant ?
Le parent passe une fonction de rappel (callback) au composant enfant via les props. L'enfant appelle cette fonction et lui transmet les données, ce qui permet au parent de recevoir et de gérer ces données.