Lifting State Up : Comment les composants enfants de React communiquent avec les parents

React utilise un flux de données unidirectionnel du parent vers l’enfant, jamais de l’enfant vers le parent. Mais que se passe-t-il lorsqu’un enfant a besoin de communiquer avec son parent ?

Découvrez comment lever l’état pour permettre à un composant enfant d’envoyer des données à un composant parent.

Les composants dans React

React organise les composants dans une hiérarchie où les composants enfants s’imbriquent dans les composants parents. Cette hiérarchie forme les blocs de construction de l’interface utilisateur de l’application.

Chaque composant enfant reçoit des données, appelées props, de son composant parent. Les props React peuvent contenir différents types de données, tels que des tableaux, des objets, des chaînes ou même des fonctions. Le composant enfant ne peut pas manipuler directement ces données.

Considérons le composant suivant, appelé Bouton compteur:

Le composant maintient une valeur d’état nommée comptage qui augmente chaque fois qu’un utilisateur clique sur le bouton.

Supposons que vous imbriquiez le composant CounterButton dans un autre composant nommé Home :

Si vous souhaitez afficher la valeur du compteur du composant Bouton compteur à l’intérieur du composant Home, vous rencontrerez un problème.

Comme indiqué, React impose un flux de données unidirectionnel du parent vers l’enfant. Par conséquent, le composant CounterButton ne peut pas partager directement la valeur de l’état de comptage avec le composant Home.

Pour contourner ce problème, vous devez lever l’état vers le haut.

Comment remonter l’état pour partager des données entre composants

La remontée d’état consiste à déplacer l’état d’un composant plus haut dans l’arbre des composants, vers un composant parent. Une fois l’état remonté, vous pouvez le transmettre aux composants enfants sous forme de valeurs prop.

Dans l’exemple du compteur de tout à l’heure, vous devez déplacer l’état de comptage et le composant handleIncrement dans le composant Home. Vous devrez ensuite passer la fonction handleIncrement au composant CounterButton en tant qu’accessoire.

Ensuite, vous devez modifier le composant CounterButton pour qu’il accepte la fonction handleIncrement et l’appelle lorsque l’utilisateur clique sur le bouton.

La levée de l’état centralise les données et transfère la responsabilité de la gestion de l’état de l’enfant au parent.

En plus de vous aider à afficher les données dans le composant parent, la levée de l’état peut vous aider à synchroniser les données entre plusieurs composants.

Supposons que vous ayez un composant d’en-tête et de pied de page imbriqué dans le composant parent et que chacun de ces composants affiche également le compte partagé. Pour partager cette valeur, vous pouvez la transmettre à ces composants en tant qu’accessoire.

Toutefois, il convient d’être prudent dans la levée de l’état afin de ne pas se retrouver dans une situation dite de « prop drilling ».

Le défi du forage de l’étai

Au fur et à mesure que votre application se développe, il se peut que plusieurs composants situés plus loin dans l’arborescence aient besoin d’accéder à un état partagé. Pour mettre cet état partagé à la disposition des composants imbriqués, vous devez faire passer des accessoires par des composants intermédiaires. Ce processus peut conduire à un forage de prop.

Le prop drilling rend difficile le suivi des flux de données et peut conduire à un code difficile à maintenir.

Pour atténuer le prop drilling tout en continuant à partager des données entre les composants, envisagez d’utiliser le contexte React. Le contexte React vous permet de centraliser l’état afin qu’il soit disponible dans l’ensemble de l’application.

Partage de données dans React à l’aide de Props

Lorsque vous devez partager des données d’un composant enfant avec son composant parent, élevez l’état au composant parent puis passez la fonction qui met à jour l’état au composant enfant en tant que props.

Dans les cas où le composant enfant est profondément imbriqué dans l’arbre des composants, utilisez un outil de gestion d’état comme React Context ou un outil tiers comme React Redux pour éviter le forage de prop.