4.2 comment les fonctions des composants sont éxécutées

Réagir aux événements n'est qu'une première étape : la grande question est comment changer ce qui apparaît à l'écran ? Dans notre cas, nous voulons modifier le titre affiché lorsqu'on clique sur le bouton « Change Title ». Voyons une première approche naïve qui va nous permettre de comprendre comment fonctionne le rendu React.

Tentative avec une variable let

On pourrait penser qu'il suffit de créer une variable mutable avec let à l'intérieur du composant. Par exemple :

const ExpenseItem = (props) => {
  let title = props.title;

  const clickHandler = () => {
    title = 'Updated!';
    console.log(title);
  };

  return (
    <div>
      <h2>{title}</h2>
      <button onClick={clickHandler}>Change Title</button>
    </div>
  );
};

Quand on clique sur le bouton, la console affiche bien « Updated! ». On peut cliquer indéfiniment, la variable est bien réassignée à chaque fois. Mais à l'écran, le titre ne change pas. Pourquoi ?

Parce que la fonction du composant n'est exécutée par React qu'une seule fois lors du rendu initial. Modifier une variable locale ne déclenche aucun nouveau rendu. React ne « sait » pas qu'il faut redessiner l'interface. C'est exactement pourquoi React a besoin d'un mécanisme spécial pour détecter les changements et déclencher une mise à jour du DOM.

Ce mécanisme s'appelle l'état (state) : c'est l'un des concepts les plus importants de React. Dans le prochain cours, nous allons découvrir le hook useState, qui permet de gérer correctement les valeurs qui changent au cours du temps et déclenchent un nouveau rendu. On se retrouve pour ça !

En résumé

Cette leçon explique le modèle d'exécution des fonctions composants React : comment le code s'exécute lors du rendu initial et comment les actions se répètent à chaque interaction utilisateur (clic). Elle montre comment gérer les variables et les événements pour changer dynamiquement ce qui apparaît à l'écran, posant les bases pour introduire le concept de state au cours suivant.

Points clés

• Les fonctions composants s'exécutent lors du rendu initial et se réexécutent à chaque modification ou interaction
• Pour réagir aux événements (clic), on peut utiliser des variables et modifier leur contenu dans les handlers d'événements
• Comprendre le cycle d'exécution est crucial car les actions se répètent : le code s'exécute une première fois puis à chaque intervention de l'utilisateur
• Le concept de state (abordé au cours suivant) est nécessaire pour gérer correctement les changements persistants dans un composant
• Les variables classiques seules ne suffisent pas pour maintenir l'état entre les exécutions : c'est une limitation importante du modèle sans state

Questions fréquentes

Quand exactement s'exécute la fonction d'un composant React ?

La fonction du composant s'exécute lors du rendu initial de l'application, puis elle se réexécute à chaque interaction utilisateur (comme un clic) ou changement détecté. C'est un cycle continuel : exécution → affichage → interaction → réexécution.

Pourquoi les simples variables ne suffisent pas pour gérer les changements dans React ?

Parce que les variables classiques ne persistent pas entre les exécutions de la fonction. À chaque réexécution, elles sont réinitialisées. Pour maintenir un état durable, il faut utiliser le concept de state qui sera expliqué au cours suivant.

Comment réagir à un événement de clic pour modifier l'affichage ?

On peut ajouter un événement onClick sur un élément, puis modifier une variable dans le handler. Cependant, pour que le changement persiste et s'affiche correctement, il faut utiliser state plutôt qu'une simple variable.