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

Les composants ont souvent besoin de modifier ce qui est affiché à l'écran suite à une interaction. 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" devrait ajouter un produit au panier. Les composants doivent "se souvenir" de choses : la valeur actuelle de la saisie, l'image actuelle, le contenu du panier. Dans React, ce type de mémoire spécifique à un composant est appelél'état.

Quand une variable classique ne suffit pas

Voici un composant qui affiche une image de sculpture. Cliquer sur le bouton "Suivant" devrait afficher la sculpture suivante en changeant l'indexpour1, puis2, et ainsi de suite. Cependant, celane fonctionnera pas(vous pouvez essayer !) :

Le gestionnaire d'événementhandleClickmet à jour une variable locale,index. Mais deux choses empêchent ce changement d'être visible :

1. Les variables locales ne persistent pas entre les rendus.Lorsque React rend ce composant une seconde fois, il le rend à partir de zéro—il ne prend pas en compte les changements apportés aux variables locales.
2. Les changements apportés aux variables locales ne déclenchent pas de rendus.React ne réalise pas qu'il doit rendre le composant à nouveau avec les nouvelles données.

Pour mettre à jour un composant avec de nouvelles données, deux choses doivent se produire :

1. Conserverles données entre les rendus.
2. Déclencherle rendu du composant par React avec de nouvelles données (re-rendu).

Le HookuseStatefournit ces deux éléments :

1. Unevariable d'étatpour conserver les données entre les rendus.
2. Unefonction de mise à jour de l'étatpour mettre à jour la variable et déclencher le re-rendu du composant par React.

Ajouter une variable d'état

Pour ajouter une variable d'état, importezuseStatedepuis React en haut du fichier :

Ensuite, remplacez cette ligne :

par

indexest une variable d'état etsetIndexest la fonction de mise à jour.

La syntaxe[et]ici est appeléedéstructuration de tableauet permet de lire des valeurs depuis un tableau. Le tableau retourné paruseStatecontient toujours exactement deux éléments.

Voici comment ils fonctionnent ensemble danshandleClick:

Maintenant, cliquer sur le bouton « Suivant » change la sculpture actuelle :

Faites connaissance avec votre premier Hook

Dans React,useState, ainsi que toute autre fonction commençant par «use», est appelée un Hook.

Les Hookssont des fonctions spéciales qui ne sont disponibles que pendant que React est en train derendre(ce que nous aborderons plus en détail dans la page suivante). Ils vous permettent de vous « connecter » à différentes fonctionnalités de React.

L'état n'est que l'une de ces fonctionnalités, mais vous rencontrerez les autres Hooks plus tard.

Anatomie deuseState

Lorsque vous appelezuseState, vous indiquez à React que vous voulez que ce composant se souvienne de quelque chose :

Dans ce cas, vous voulez que React se souvienne deindex.

Le seul argument deuseStateest lavaleur initialede votre variable d'état. Dans cet exemple, la valeur initiale deindexest définie à0avecuseState(0).

Chaque fois que votre composant est rendu,useStatevous donne un tableau contenant deux valeurs :

1. Lavariable d'état(index) avec la valeur que vous avez stockée.
2. Lafonction de mise à jour de l'état(setIndex) qui peut mettre à jour la variable d'état et déclencher un nouveau rendu du composant par React.

Voici comment cela se passe en action :

1. Votre composant effectue son premier rendu.Comme vous avez passé0 à useStatecomme valeur initiale pourindex, elle retournera[0, setIndex]. React mémorise que0est la dernière valeur d'état.
2. Vous mettez à jour l'état.Lorsqu'un utilisateur clique sur le bouton, cela appellesetIndex(index + 1).indexvaut0, donc c'estsetIndex(1). Cela indique à React de mémoriser queindexvaut maintenant1et déclenche un autre rendu.
3. Le deuxième rendu de votre composant.React voit toujoursuseState(0), mais comme Reactse souvientque vous avez définiindex à 1, il retourne[1, setIndex]à la place.
4. Et ainsi de suite !

Donner plusieurs variables d'état à un composant

Vous pouvez avoir autant de variables d'état de types différents que vous le souhaitez dans un seul composant. Ce composant a deux variables d'état, un nombreindexet un booléenshowMorequi est basculé lorsque vous cliquez sur « Afficher les détails » :

Il est judicieux d'avoir plusieurs variables d'état si leur état n'est pas lié, commeindexetshowMoredans cet exemple. Mais si vous constatez que vous modifiez souvent deux variables d'état ensemble, il peut être plus facile de les combiner en une seule. Par exemple, si vous avez un formulaire avec de nombreux champs, il est plus pratique d'avoir une seule variable d'état qui contient un objet plutôt qu'une variable d'état par champ. LisezChoisir la structure de l'étatpour plus de conseils.

L'état est isolé et privé

L'état est local à une instance de composant à l'écran. En d'autres termes,si vous affichez deux fois le même composant, chaque copie aura un état totalement isolé !Modifier l'un n'affectera pas l'autre.

Dans cet exemple, le composantGalleryprécédent est affiché deux fois sans modification de sa logique. Essayez de cliquer sur les boutons à l'intérieur de chaque galerie. Notez que leurs états sont indépendants :

C'est ce qui différencie l'état des variables classiques que vous pourriez déclarer en haut de votre module. L'état n'est pas lié à un appel de fonction particulier ou à un endroit dans le code, mais il est « local » à un endroit spécifique à l'écran. Vous avez rendu deux composants<Gallery />, donc leurs états sont stockés séparément.

Notez également que le composantPagene « sait » rien de l'état deGallery, ni même s'il en a un. Contrairement aux props,l'état est entièrement privé au composant qui le déclare.Le composant parent ne peut pas le modifier. Cela vous permet d'ajouter un état à n'importe quel composant ou de le supprimer sans impacter les autres composants.

Et si vous vouliez que les deux galeries gardent leurs états synchronisés ? La bonne façon de procéder dans React est desupprimerl'état des composants enfants et de l'ajouter à leur parent partagé le plus proche. Les prochaines pages se concentreront sur l'organisation de l'état d'un seul composant, mais nous reviendrons sur ce sujet dansPartager l'état entre les composants.

Récapitulatif

• Utilisez une variable d'état lorsqu'un composant doit « mémoriser » certaines informations entre les rendus.
• Les variables d'état sont déclarées en appelant le HookuseState.
• Les Hooks sont des fonctions spéciales qui commencent paruse. Elles vous permettent de vous « connecter » aux fonctionnalités de React comme l'état.
• Les Hooks peuvent vous rappeler les imports : ils doivent être appelés de manière inconditionnelle. Appeler des Hooks, y comprisuseState, n'est valide qu'au niveau supérieur d'un composant ou d'un autre Hook.
• Le HookuseStaterenvoie une paire de valeurs : l'état actuel et la fonction pour le mettre à jour.
• Vous pouvez avoir plusieurs variables d'état. En interne, React les fait correspondre selon leur ordre.
• L'état est privé au composant. Si vous le rendez à deux endroits, chaque copie possède son propre état.