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.