Vous trouvez peut-être que les variables d’état ressemblent à des variables JavaScript classiques, que vous pouvez lire et écrire librement. Pourtant, une variable d’état se comporte davantage comme une photo instantanée. Lui affecter une nouvelle valeur ne change pas la variable d’état que vous avez déjà, mais déclenche plutôt un nouveau rendu.

Vous allez apprendre

  • Comment une modification d’état déclenche un nouveau rendu
  • Comment et quand l’état est mis à jour
  • Pourquoi l’état n’est pas mis à jour immédiatement après que vous l’avez modifié
  • Comment les gestionnaires d’événements accèdent à un « instantané » de l’état

Modifier l’état déclenche un rendu

Vous pourriez croire que l’interface utilisateur (UI) évolue en réaction directe à des événements utilisateurs tels qu’un clic. Dans React, les choses sont un peu différentes de ce modèle mental. Dans la page précédente, nous avons vu que modifier l’état demande un nouveau rendu à React. Ça signifie que pour que l’interface réagisse à l’événement, vous devez mettre à jour l’état.

Dans cet exemple, lorsque vous appuyez sur « Envoyer », setIsSent(true) demande à React de refaire un rendu de l’UI :

import { useState } from 'react';

export default function Form() {
  const [isSent, setIsSent] = useState(false);
  const [message, setMessage] = useState('Salut !');
  if (isSent) {
    return <h1>Votre message est en route !</h1>
  }
  return (
    <form onSubmit={(e