Réactivité des états dans React

Voyons maintenant comment fonctionne la réactivité. Elle fait en sorte que lors de la modification d'un état, les changements s'affichent instantanément à l'écran.

Regardons un exemple. Supposons que nous ayons un état avec le nom d'un produit :

jsxconst [name, setName] = useState('prod');

Affichons le nom du produit dans le rendu :

jsxreturn <div>
  <span>{name}</span>
</div>;

Créons maintenant un bouton, lors du clic duquel notre état sera modifié :

jsxreturn <div>
  <span>{name}</span>
  <button onClick={clickHandler}>btn</button>
</div>;

Dans le gestionnaire de clic, utilisons la fonction setName, pour définir un nouveau nom pour le produit :

jsxfunction clickHandler() {
  setName('xxxx');
}

Rassemblons tout notre code. Il en résultera qu'après avoir cliqué sur le bouton, le texte changera instantanément pour la nouvelle valeur :

jsxfunction App() {
  const [name, setName] = useState('prod');
  
  function clickHandler() {
    setName('xxxx');
  }
  
  return <div>
    <span>{name}</span>
    <button onClick={clickHandler}>btn</button>
  </div>;
}

L'utilisation de fonctions gestionnaires séparées n'est pas obligatoire. On peut utiliser une fonction fléchée anonyme :

jsxfunction App() {
  const [name, setName] = useState('prod');
  
  return <div>
    <span>{name}</span>
    <button onClick={() => setName('xxxx')}>btn</button>
  </div>;
}