Guide du crochet useEffect

Découvrez comment utiliser le hook useEffect pour exécuter du code lorsqu’un état ou une valeur d’accessoire change dans notre application React.

React est livré avec quelques hooks de base pour nous permettre de créer des composants qui fonctionnent de manière dynamique. Les hooks sont des fonctions qui renvoient des valeurs et peuvent être utilisées dans des composants pour renvoyer différentes choses lorsque les valeurs réactives changent.

Dans cet article, nous verrons comment utiliser le useEffect crochet.

Le crochet useEffect

Nous utilisons le useEffect hook pour faire des choses lorsque des valeurs réactives changent. Les valeurs réactives incluent les valeurs d’état et d’accessoires.

On peut utiliser useEffect pour exécuter du code lorsqu’un état ou une valeur d’accessoire change.

Par exemple, nous écrivons :

import { useEffect, useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    console.log(count);
  }, [count]);

  return (
    <div>
      <button onClick={() => setCount((c) => c + 1)}>increment</button>
    </div>
  );
}

pour créer le count état avec le useState crochet.

Et puis nous appelons le useEffect hook pour enregistrer la valeur de count quand count changements. Ensuite, nous ajoutons un bouton qui incrémente la valeur de count par 1 quand on clique dessus. Le rappel sera appelé à chaque fois count changements depuis que nous avons mis count dans le tableau dans le deuxième argument de useEffect.

Quel que soit l’état et la valeur de l’accessoire que nous y mettrons, ils seront surveillés par useEffectet le rappel dans le premier argument sera appelé chaque fois que ces valeurs changent.

Dans le rappel, nous appelons useState avec une fonction qui reprend le précédent count value comme argument et renvoie la nouvelle valeur de count dérivé de cela.

En appelant setCount avec une fonction qui renvoie la nouvelle valeur d’état basée sur l’état précédent, nous pouvons nous assurer que nous obtenons toujours la dernière valeur d’état basée sur la valeur précédente.

Nous pouvons faire le useEffect le rappel ne s’exécute que lorsque le composant est monté en appelant le useEffect rappel avec un tableau vide.

Et nous pouvons faire le useEffect le rappel du hook est exécuté chaque fois que le composant est restitué en omettant le deuxième argument lors de l’appel useEffect.

Exécution du code de nettoyage lorsque le composant est démonté

Nous pouvons exécuter du code de nettoyage dans le useEffect lorsque le composant se démonte. Pour ce faire, nous renvoyons une fonction qui exécute le code de nettoyage lors du démontage du composant.

Par exemple, nous écrivons :

import { useEffect, useState } from "react";

export default function App() {
  const [screenSize, setScreenSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight
  });
  const { width, height } = screenSize;

  const onResize = () => {
    setScreenSize({
      width: window.innerWidth,
      height: window.innerHeight
    });
  };
  useEffect(() => {
    window.addEventListener("resize", onResize);
    return () => {
      window.removeEventListener("resize", onResize);
    };
  }, []);

  return (
    <div>
      {width}x{height}
    </div>
  );
}

appeler useEffect avec une fonction qui appelle window.addEventListener pour ajouter le onResize fonctionner comme le resize fonction d’écoute d’événements.

onResize sera ensuite appelé lorsque nous redimensionnerons l’écran.

Et pour supprimer l’écouteur d’événements lors du démontage du composant, nous appelons window.removeEventListener pour supprimer le resize écouteur d’événement lorsque le App le composant se démonte.

La fonction renvoyée dans le useEffect le rappel est exécuté lorsque nous démontons le composant.

Dans onResizenous appelons setScreenSize mettre en place screenSize à la largeur et à la hauteur de l’écran, nous voyons donc le width et height change lorsque nous redimensionnons l’écran.

Pouvoir appeler du code d’exécution lorsque le composant se monte et se démonte avec le useEffect le rend pratique pour la synchronisation avec des systèmes externes.

Nous pouvons également manipuler des systèmes externes lorsqu’une valeur réactive change avec le useEffect crochet.

Par exemple, nous écrivons :

import { useEffect, useRef, useState } from "react";

const ModalDialog = ({ open, children }) => {
  const ref = useRef();

  useEffect(() => {
    const dialog = ref.current;
    if (open) {
      dialog.showModal();
    }

    return () => {
      dialog.close();
    };
  }, [open]);

  return <dialog ref={ref}>{children}</dialog>;
};

export default function App() {
  const [open, setOpen] = useState(false);
  return (
    <div>
      <button onClick={() => setOpen(true)}>Open Dialog</button>
      <ModalDialog open={open}>
        <p>hello world</p>
        <button onClick={() => setOpen(false)}>Close Dialog</button>
      </ModalDialog>
    </div>
  );
}

pour créer le ModalDialog composant.

Il faut le open accessoire et appels useEffect qui appelle dialog.showModal pour ouvrir la boîte de dialogue lorsque le open l’état est vrai.

Et lorsque le composant se démonte, nous appelons dialog.close pour fermer la boîte de dialogue.

Le ref est attribué comme élément de dialogue ref valeur de l’accessoire, donc ref.current est l’élément de dialogue.

Créez des hooks personnalisés avec le hook useEffect

Le useEffect hook est l’un des hooks de base fournis avec React. Par conséquent, nous pouvons l’utiliser pour créer nos propres hooks React personnalisés afin d’encapsuler la logique que nous réutiliserons.

Pour ce faire, il suffit de renvoyer les valeurs réactives que nous souhaitons renvoyer afin qu’elles puissent être utilisées dans les composants. Et le hook personnalisé appellera simplement d’autres hooks pour obtenir les valeurs que nous souhaitons renvoyer.

Par exemple, nous pouvons nettoyer l’exemple précédent en déplaçant le code de l’écouteur de redimensionnement dans son propre hook.

Pour ce faire, nous écrivons :

import { useEffect, useState } from "react";

const useScreenSize = () => {
  const [screenSize, setScreenSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight
  });

  const onResize = () => {
    setScreenSize({
      width: window.innerWidth,
      height: window.innerHeight
    });
  };
  useEffect(() => {
    window.addEventListener("resize", onResize);
    return () => {
      window.removeEventListener("resize", onResize);
    };
  }, []);
  return screenSize;
};

export default function App() {
  const { width, height } = useScreenSize();

  return (
    <div>
      {width}x{height}
    </div>
  );
}

Nous créons le useScreenSize hook qui a la logique que nous avions précédemment dans le App composant. Le useState et useEffect les appels sont déplacés vers useScreenSize et ils font tous la même chose.

Et nous revenons screenSize nous pouvons donc utiliser la valeur renvoyée dans n’importe quel composant ou un autre hook personnalisé.

Puis dans Appnous appelons useScreenSize pour restituer l’objet avec le width et height. Et nous rendons ces valeurs dans le div.

Conclusion

Le useEffect hook nous permet d’exécuter du code qui réagit aux valeurs de propriétés réactives. Il est principalement utilisé pour exécuter du code qui interagit avec des systèmes externes avec des valeurs réactives dans les modifications des composants.

Nous pouvons faire le useEffect le rappel est exécuté lorsque la valeur réactive change ou lorsque le composant se monte ou s’exécute à chaque fois que le composant est restitué.

De plus, nous pouvons renvoyer une fonction dans le useEffect pour exécuter n’importe quel code que nous souhaitons exécuter lors du démontage du composant. Ceci est pratique pour exécuter n’importe quel code de nettoyage lorsqu’un composant est démonté.