setState et prevState dans React

Nous allons introduire setState et prevState et les utiliser dans React.

setState et prevState dans React

setState() et prevState() sont des hooks useState utilisés pour changer l’état d’un composant de classe React.

setState() indique que ce composant et ses composants enfants sont modifiés et doivent être restitués avec l’état mis à jour. setState est la principale méthode utilisée pour mettre à jour l’interface utilisateur en réponse aux gestionnaires d’événements et aux réponses du serveur.

prevState() est identique à setState mais la seule différence entre eux est que si nous voulons changer l’état d’un composant en fonction de l’état précédent de ce composant, nous utilisons this.setState(), qui nous fournit le prevState.

Voyons un exemple d’application de compteur. Cela peut incrémenter, décrémenter, réinitialiser les nombres.

Tout d’abord, nous allons créer un nouveau fichier, Counter.js. Dans Counter.js, nous allons import React from "react"; et créez une fonction appelée Counter().

Dans Counter() nous allons initialiser nos constantes initialNum, num et setNum

# react
import React from "react";

function Counter() {
  const initialNum = 0;
  const [num, setNum] = React.useState(initialNum);
}

Nous allons retourner le HTML avec des boutons et un affichage de compteur. Ainsi, Counter.js ressemblera à ci-dessous.

# react
import React from "react";

function Counter() {
  const initialNum = 0;
  const [num, setNum] = React.useState(initialNum);

  };

  return (
    <div>
      <p>Counter: {num}</p>
      <button onClick={() => setNum(initialNum)}>Reset</button>
      <button onClick={() => setNum(num + 1)}>Increment</button>
      <button onClick={() => setNum(num - 1)}>Decrement</button>
    </div>
  );
}
export default Counter;

Incluons Counter.js dans App.js et ajoutons son composant. App.js ressemblera à ci-dessous.

# react
import "./styles.css";
import Counter from "./Counter.js";

export default function App() {
  return (
    <div className="App">
      <Counter />
    </div>
  );
}

Maintenant, testons notre compteur.

Production :

Ajoutons un autre bouton qui incrémentera le compteur de cinq.

# react
 <button onClick={IncrementByFive}>Increment By 5</button>

Créons une fonction IncrementByFive.

# react
const IncrementByFive = () => {
    for (let i = 0; i < 5; i++) {
      setNum(num + 1);
    }
  };

Cette fonction bouclera cinq fois pour l’incrémenter de 5.

Maintenant, testons notre application de compteur.

Production :

Lorsque nous cliquons sur le bouton Increment by 5, cela n’incrémente le compteur que de 1.

C’est parce que dans setNum(num + 1); il y a plusieurs appels setNum, donc React regroupe tous ces appels et met à jour l’état seulement dans le dernier appel de setNum, et parce que dans le dernier appel setNum n’est pas encore mis à jour et a toujours la même valeur, donc il l’incrémente seulement de 1.

C’est alors que prevState devient utile et résout nos problèmes comme un champion. Maintenant, réécrivons notre application de compteur en utilisant prevState.

En fait, au lieu de passer une valeur de la nouvelle variable d’état, nous passons une fonction qui a accès à l’ancienne valeur d’état. Donc, maintenant nous allons modifier la fonction IncrementByFive en changeant setNum(num + 1); en setNum(prevNum => prevNum + 1);.

Ainsi, notre fonction ressemblera à ci-dessous.

# react
const IncrementByFive = () => {
    for (let i = 0; i < 5; i++) {
      setNum(prevNum => prevNum + 1);
    }
  };

Maintenant, testons notre application de compteur.

Production :

Dans le résultat ci-dessus, lorsque nous cliquons sur le bouton Increment by 5, il l’incrémente de 5.

Corrigeons également nos autres boutons en utilisant prevState.

Counter.js ressemblera à ci-dessous.

# react
import React from "react";

function Counter() {
  const initialNum = 0;
  const [num, setNum] = React.useState(initialNum);

  const IncrementByFive = () => {
    for (let i = 0; i < 5; i++) {
      setNum((prevNum) => prevNum + 1);
    }
  };

  return (
    <div>
      <p>Counter: {num}</p>
      <button onClick={() => setNum(initialNum)}>Reset</button>
      <button onClick={() => setNum((prevNum) => prevNum + 1)}>
        Increment
      </button>
      <button onClick={() => setNum((prevNum) => prevNum - 1)}>
        Decrement
      </button>
      <button onClick={IncrementByFive}>Increment By 5</button>
    </div>
  );
}
export default Counter;

Ainsi, dans ce guide, nous avons découvert les problèmes qui peuvent être résolus à l’aide de prevState, et nous avons également créé une application de compteur de base dans React en utilisant setState et prevState.