4.4 un examen plus approfondi du crochet useState

Dans ce cours, nous allons regarder de plus près le hook useState et observer concrètement comment React ré-exécute la fonction du composant à chaque mise à jour de l'état. C'est une étape importante pour bien intégrer le cycle de vie d'un composant fonctionnel.

Observer la ré-évaluation du composant

Juste en dessous de la ligne const [title, setTitle] = useState(props.title);, ajoutez un console.log pour tracer chaque exécution :

const [title, setTitle] = useState(props.title);
console.log('ExpenseItem évalué par React');

Maintenant, ouvrez votre navigateur, lancez votre application et appuyez sur F12 pour ouvrir les outils de développement. Allez dans l'onglet Console. Au premier chargement de la page, vous devriez voir apparaître « ExpenseItem évalué par React » autant de fois qu'il y a d'éléments rendus à l'écran.

Ensuite, cliquez sur le bouton « Change Title » d'un ExpenseItem. Vous allez voir deux choses se produire simultanément : un nouveau message « ExpenseItem évalué par React » apparaît dans la console — preuve que React a bien ré-exécuté la fonction du composant — et le titre affiché à l'écran passe à « Updated! ».

Cette expérience démontre la mécanique fondamentale de useState : à chaque fois que vous appelez la fonction setter (setTitle), React planifie une nouvelle exécution de la fonction du composant. Le nouvel état devient alors la valeur initiale du prochain rendu, et le DOM est mis à jour en conséquence. On se retrouve dans le prochain cours pour explorer les événements et les inputs utilisateur.

En résumé

Cette leçon montre comment déboguer et vérifier le fonctionnement du hook useState en React. On ajoute un console.log pour tracer les éléments gérés par React, puis on utilise les outils développeur (F12) pour observer dans la console comment l'état se met à jour lors d'une action utilisateur (clic sur le bouton 'change titre').

Points clés

• Ajouter console.log() pour tracer les valeurs d'état gérées par React
• Ouvrir les outils développeur avec F12 pour accéder à la console du navigateur
• Cliquer sur le bouton 'change titre' pour déclencher une mise à jour d'état
• Vérifier que les données s'affichent et se mettent à jour correctement dans la console
• Utiliser ce débogage pour valider que useState réagit correctement aux changements

Questions fréquentes

Comment puis-je vérifier que useState met à jour mon état correctement ?

Ajoutez un console.log avec votre variable d'état dans le composant, ouvrez les outils développeur (F12), allez dans l'onglet Console et cliquez sur les boutons qui modifient l'état pour observer les changements en temps réel.

Que signifie 'évalué par React' ?

Cela signifie que React surveille cette donnée et redessine le composant automatiquement chaque fois qu'elle change grâce au hook useState.

Pourquoi utiliser console.log plutôt que simplement regarder l'affichage visuel ?

console.log vous permet de voir exactement ce qui se passe en arrière-plan et de déboguer les problèmes d'état qui ne sont pas visibles à l'écran.