Les states et le hook useState

Le state : le cœur dynamique du composant

Comme on l'a vu dans le cours consacré à la bibliothèque React, un state est un objet interne à un composant qui stocke les données dynamiques susceptibles de changer au cours du cycle de vie de celui-ci, et qui déclenche une mise à jour de l’interface lorsqu’il est modifié (que l'on appelle rerendering).

Les states sont des éléments capitaux dans une application React, car ce sont eux qui maintiennent l’état d’un composant.

Le hook useState: le pilote du changement d’état d'un state

Un hook est une fonction fournie par React (ou React Native) qui permet à un composant fonctionnel de gérer son état, réagir aux changements ou accéder à des fonctionnalités avancées, tout en gardant une structure simple et déclarative. Pour simplifier, on peut imaginer un hook comme une sorte de fonction interne et prédéfinie en React Native.

Le hook useState est une fonction spéciale qui permet de gérer les states. En effet, c'est au hook useState qu'incombe la création et la mise à jour du state durant tout le cycle de vie du composant.

L'event handler: le déclencheur d'action

Un event handler est une fonction que l’on associe à un composant pour réagir à un événement utilisateur (comme un appui, une saisie, un défilement…). Lorsqu’un événement se produit, l’event handler est déclenché automatiquement pour exécuter une logique définie par le développeur.

Dans a plupart des cas, l'event handler commande le hook useState qui, à son tour, commande le state en mettant sa valeur à jour et, par conséquent, rafraichir l'affichage de l'application (rerendering).

Exemple complet: incrémenteur d'une valeur

L'idée est d'intégrer un bouton à notre application qui, une fois actionné, permet d'incrémenter une valeur placée juste en dessous.

Comme vous l'aurez deviné, la valeur qui sera incrémentée sera placée dans un state et qui sera piloté par le hook useState à travers un event handler afin d'actualiser l'affichage et voir la valeur qui change sur notre appareil.

Je propose le code suivant:
Au moment de l'exécution, on aura sur notre téléphone quelque chose qui ressemble à ceci:
Maintenant, expliquons tout ça!

D'abord, vous avez certainement remarqué que les importations ont changé. En effet, on a invoqué les modules useState et Button, en plus des modules déjà présents dans le code fourni par défaut.
Dans le corps de la fonction App() qui implémente le composant principal de l'application, nous avons initialisé le state identifié par nbr avec la valeur 0 comme ceci:
Au passage, nous avons aussi nommé le setter de notre state setNbr.

Si vous voulez plus de détails concernant ces notions-là ainsi que la syntaxe que l'on a utilisé, je vous renvoie vers cette leçon sur les states en React.

Ensuite, nous avons défini l'event handler (la fonction qui ordonnera l'incrémentation du state) qu'on a nommé handeButtoncomme ceci:
Dans le JSX (ce qui a été retourné par la fonction du composant principal), nous avons intégré les composants <Button> (qui déclenche l'incrémentation) et <Text> (qui contient la valeur à incrémenter).
Concernant l'événement, nous avons utilisé onPress au lieu de onClick. En effet, onClick est un événement du DOM (Document Object Model) propre aux navigateurs web. React Native ne s’appuie pas sur le DOM, mais sur des composants natifs Android/iOS. Par conséquent, on utilise des événements comme onPress, onLongPress...

Quant à l'appel de l'event handler, on l'a placé entre accolades via une opération connue sous le nom d'interpolation JSX et qu'on a déjà vu en détail dans le cours de React. Pareil pour le state nbr.

Afin de mieux assimiler les concepts vus dans cette leçon, je vous invite à placer trois butons dans l'application, un pour incrémenter, un pour décrémenter et un pour remettre à zéro. Il vous faudra ensuite adapter la logique de votre event handler et ça sera tout!