Skip to main content

Chapitre 5 : Etat et interactions (useState)

Etat local, Mise à jour de l'état, Interactions utilisateur

Etat local​

L’état représente les données dynamiques d’un composant, celles qui peuvent évoluer dans le temps. Il est géré avec le hook useState. L’état permet de stocker des informations (comme un compteur, un texte saisi ou une sélection). Chaque mise à jour d’état entraîne un nouveau rendu du composant.

Mise à jour de l’état​

L’état ne doit jamais être modifié directement. React fournit une fonction dédiée pour mettre à jour l’état de manière contrôlée. Cette règle garantit que React peut détecter correctement les changements. Elle évite aussi des comportements imprévisibles dans l’interface.
Chaque mise à jour des states génère un re-render de React pour vérifier si la nouvelle props change l’affichage ou pas.

Interactions utilisateur​

Les interactions utilisateur, comme les clics ou les saisies, sont gérées via des événements. Ces événements déclenchent des mises à jour de l’état. React met alors automatiquement à jour l’interface. Ce mécanisme est au cœur de l’interactivité des applications React.

Questions clés (validation des acquis du chapitre)​

  • Qu’est-ce que l’état local ? Ce sont des données propres à un composant, susceptibles d’évoluer dans le temps.
  • Pourquoi l’état doit-il être immuable ? Pour permettre à React de détecter correctement les changements et déclencher les re-renders. Si l’état est mis à jour en dehors du setState, alors React serait désynchronisé de l’état.
  • Quel est le lien entre interaction et re-render ? Une interaction modifie l’état, ce qui déclenche un nouveau rendu du composant.

Exercices :​

Exercice 1 - Utiliser useState​

  1. Créer un composant React “Compteur”
  2. Ce composant affiche un nombre initialisé à 0 et contient un bouton “increment”
  3. Chaque clic sur le bouton, le nombre affiché augmente de 1

Il faut utiliser le hook useState pour stocker l’état du nombre, et sa mise à jour.

Exercices 2​

Pour approfondir : https://react.dev/learn/managing-state

Exercice 3 - Tic tac Toe​

Afin de valider tes acquis de ces derniers chapitres, tu peux effectuer l’exercice du Tic Tac Toe : https://react.dev/learn/tutorial-tic-tac-toe

Liens utiles :
https://dmitripavlutin.com/react-usestate-hook-guide/