Ajouter de l’interactivité

Réagir aux événements

React vous permet d’ajouter des gestionnaires d’événements à votre JSX. Les gestionnaires d’événements sont vos propres fonctions qui seront déclenchées en réponse aux interactions de l’utilisateur telles que des clics, survols, activations de champs de saisie de formulaires, etc.

Les composants natifs tels que <button> ne prennent en charge que les événements natifs du navigateur tels que onClick. Cependant, vous pouvez également créer vos propres composants et donner à leurs props de gestionnaires d’événements des noms spécifiques à l’application, selon vos besoins.

L’état : la mémoire d’un composant

Les composants ont souvent besoin de modifier ce qui est affiché à l’écran en réponse à une interaction. Par exemple, saisir du texte dans un formulaire devrait mettre à jour le champ de saisie, cliquer sur « suivant » dans un carrousel d’images devrait changer l’image affichée, cliquer sur « acheter » ajoute un produit au panier d’achats. Les composants ont besoin de « se souvenir » de certaines choses : la valeur saisie, l’image active, le panier d’achats. En React, ce type de mémoire spécifique au composant est appelé état.

Vous pouvez ajouter un état à un composant avec un Hook . Les Hooks sont des fonctions spéciales qui permettent à vos composants d’utiliser des fonctionnalités de React (l’état en est une). Le Hook useState vous permet de déclarer une variable d’état. Il prend l’état initial en argument et renvoie une paire de valeurs : l’état actuel et une fonction qui vous permet de le modifier.

Voici comment une galerie d’images utilise et met à jour l’état lors d’un clic :

Rendu et Commit

Avant que vos composants ne soient affichés à l’écran, React doit effectuer leur rendu. Comprendre les étapes de ce processus vous aidera à réfléchir à l’exécution de votre code et à expliquer son comportement.

Imaginez que vos composants soient des cuisiniers dans un restaurant, assemblant des plats savoureux à partir d’ingrédients. Dans ce scénario, React est le serveur qui prend les commandes des clients et leur apporte leurs plats. Ce processus de demande et de service de l’UI comporte trois étapes :

1. Déclencher un rendu (envoyer la commande du client à la cuisine)
2. Faire le rendu du composant (préparer la commande en cuisine)
3. Mettre à jour le DOM (phase de Commit ; revient à déposer la commande sur la table du client)

L’état est un instantané

Contrairement aux variables JavaScript classiques, une variable d’état dans React se comporte davantage comme une photo instantanée. Lui affecter une nouvelle valeur ne change pas la variable d’état que vous avez déjà, mais déclenche plutôt un nouveau rendu. Ça peut surprendre au début !

Ce comportement vous aide à éviter des bugs subtils. Voici une petite appli de discussion. Essayez de deviner ce qui se passe si vous appuyez sur « Envoyer » d’abord, et ensuite changez le destinataire pour Bob. Quel nom apparaîtra dans le alert cinq secondes plus tard ?

Cumuler les mises à jour d’un même état

Ce composant comporte un bug : cliquer sur « +3 » n’incrémente le score qu’une seule fois.

en explique la raison. Affecter une nouvelle valeur à un état déclenchera un nouveau rendu, mais ne change pas sa valeur dans le code en cours d’exécution. Ainsi, score reste à 0 juste après avoir appelé setScore(score + 1).

Vous pouvez corriger ça en passant une fonction de mise à jour lorsque vous affectez une nouvelle valeur à l’état. Voyez comme le remplacement de setScore(score + 1) par setScore(s => s + 1) corrige le bouton « +3 ». Ça vous permet de cumuler plusieurs mises à jour d’un même état.

Mettre à jour les objets d’un état

Un état peut contenir n’importe quel type de valeur JavaScript, y compris des objets. Cependant, vous ne devez pas changer directement les objets et les tableaux que vous stockez dans l’état React. Au lieu de cela, lorsque vous voulez mettre à jour un objet ou un tableau, vous devez en créer un nouveau (ou faire une copie de l’existant), puis mettre à jour l’état pour utiliser cette copie.

Généralement, vous utiliserez la syntaxe de spread ... pour copier les objets et les tableaux que vous souhaitez modifier. Par exemple, la mise à jour d’un objet imbriqué pourrait ressembler à ceci :

Si la copie d’objets dans le code devient fastidieuse, vous pouvez utiliser une bibliothèque telle que pour simplifier le code :

Mettre à jour les tableaux d’un état

Les tableaux sont un autre type d’objet modifiable en JavaScript que vous pouvez stocker dans un état et que vous devez traiter comme étant en lecture seule. Tout comme avec les objets, lorsque vous souhaitez mettre à jour un tableau stocké dans un état, vous devez en créer un nouveau (ou en copier un existant), puis affecter le nouveau tableau dans l’état :

Si la copie de tableaux dans le code devient fastidieuse, vous pouvez utiliser une bibliothèque telle que pour simplifier le code :

Et maintenant ?

Allez sur pour commencer à lire ce chapitre page par page !

Ou alors, si vous êtes déjà à l’aise avec ces sujets, pourquoi ne pas explorer comment  ?