Maîtriser le hook usePrevious dans React

Introduction

Dans ce laboratoire, nous allons explorer l'utilisation du hook usePrevious dans React. Ce hook personnalisé nous permet de stocker l'état ou les props précédents d'un composant, ce qui peut s'avérer utile dans diverses situations. En créant un composant de compteur simple et en utilisant le hook usePrevious, nous allons démontrer comment implémenter cette fonctionnalité dans vos projets React.

React usePrevious Hook

index.html et script.js ont déjà été fournis dans la machine virtuelle. En général, vous n'avez qu'à ajouter du code à script.js et style.css.

Pour stocker l'état ou les props précédents, vous pouvez créer un hook personnalisé. Voici les étapes :

Définissez un hook personnalisé qui prend un argument value.
Utilisez le hook useRef() pour créer une ref pour la value.
Utilisez le hook useEffect() pour retenir la valeur la plus récente de value.
Retournez la valeur ref.current.

const usePrevious = (value) => {
  const ref = React.useRef();
  React.useEffect(() => {
    ref.current = value;
  });
  return ref.current;
};

Voici un exemple d'utilisation du hook usePrevious :

const Counter = () => {
  const [value, setValue] = React.useState(0);
  const lastValue = usePrevious(value);

  return (
    <div>
      <p>
        Actuel : {value} - Précédent : {lastValue}
      </p>
      <button onClick={() => setValue(value + 1)}>Incrémenter</button>
    </div>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(<Counter />);

Le composant Counter affiche les valeurs actuelles et précédentes de value. Lorsque le bouton Incrémenter est cliqué, value est mis à jour et la valeur précédente est stockée à l'aide du hook usePrevious.

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Résumé

Félicitations ! Vous avez terminé le laboratoire sur le hook React usePrevious. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.