Lifting state up – Remonter l’état

En React, chaque composant dispose de son propre état (useState). Il ne peut pas être partagé directement.

Si deux composants ont besoin de la même donnée et doivent la changer, il faut trouver un endroit commun pour stocker cette donnée, c’est le lifting state up.

Le state doit être dans leur parent commun.

Pour rappel, le state est une valeur qui change dans le temps et que React surveille pour mettre à jour l’écran automatiquement quand cette valeur change.

Le state (ou état) en React, c’est ce qui est « mis en mémoire » dans un composant et qui peut changer au fil du temps.

Exemple :

function Joueur({ nom, score, onIncrement }) {
return (

);
}

function App() {
const [scores, setScores] = useState({
alice: 0,
bob: 0,
});

return (

);
}

Le composant App gère un état global (les scores des deux joueurs)
Chaque joueur est un composant réutilisable
Les fonctions sont passées via les props pour permettre aux enfants de modifier l’état global.