Hook useTimeout de React

Introduction

Dans ce laboratoire, nous allons explorer comment implémenter la fonction setTimeout() de manière déclarative en utilisant le hook personnalisé useTimeout dans React. Ce hook nous permet de configurer un délai d'attente et de le nettoyer facilement, tout en gardant en mémoire la dernière fonction de rappel. Nous verrons également un exemple d'utilisation du hook useTimeout pour créer un minuteur d'une seconde qui met à jour l'état d'un composant toutes les secondes.

Skills Graph

React useTimeout 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 implémenter setTimeout() de manière déclarative, créez un hook personnalisé qui prend une callback et un delay. Utilisez le hook useRef() pour créer une ref pour la fonction de rappel, et utilisez le hook useEffect() pour retenir la dernière fonction de rappel. Ensuite, utilisez le hook useEffect() pour configurer le délai d'attente et le nettoyer.

Voici un extrait de code d'exemple qui illustre cette approche :

const useTimeout = (callback, delay) => {
  const savedCallback = React.useRef();

  React.useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  React.useEffect(() => {
    const tick = () => {
      savedCallback.current();
    };
    if (delay !== null) {
      let id = setTimeout(tick, delay);
      return () => clearTimeout(id);
    }
  }, [delay]);
};

const OneSecondTimer = (props) => {
  const [seconds, setSeconds] = React.useState(0);

  useTimeout(() => {
    setSeconds(seconds + 1);
  }, 1000);

  return <p>{seconds}</p>;
};

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

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 useTimeout. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.