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.