Utiliser le callback avec les hooks useState dans React

Nous allons introduire useState et utiliser le callback avec hooks useState dans React.

useState dans React

La fonction useState est un hook intégré qui peut être importé à partir du package React, ce qui nous permet d’ajouter un état à nos composants fonctionnels.

useState a été introduit à partir de React 16.7. L’utilisation d’un crochet useState à l’intérieur d’un composant de fonction nous permet de créer un élément d’état sans passer aux composants de classe.

Pour utiliser un callback avec les crochets useState, nous pouvons utiliser useEffect.

Passons en revue un exemple. Nous allons créer un bouton ; sur le titre de la page en cliquant sur le bouton sera modifié.

Tout d’abord, dans app.js à l’intérieur de export default function App(), nous allons déclarer deux constantes click et setClick en utilisant React useState.

# react
  const [click, setClick] = React.useState(0);

En utilisant useEffect, nous allons créer une fonction qui vérifiera la valeur de click. Si la valeur clic est égale ou supérieure à 1, il changera document.title en Button clicked, et si la valeur de click est inférieure à 1, elle changera document.title en No button clicked.

# react
React.useEffect(() => {
    if (click >= 1) {
      document.title = "Button Clicked!";
    } else {
      document.title = "No Button Clicked!";
    }
  }, [click]);

Maintenant, nous allons retourner la mise en page.

# react
<div className="App">
      <h1>Press button to see changes</h1>
      <button type="button" onClick={() => setClick(click + 1)}>
        Change Document Title
      </button>
    </div>

Production :

Comme on le voit dans la sortie ci-dessus, le titre de notre page affiche Aucun bouton cliqué. Vérifions maintenant après avoir cliqué sur le bouton.

Production :