Partage
  • Partager sur Facebook
  • Partager sur Twitter

cycle de vie et Hooks [useEffect]

Reactjs

    14 septembre 2021 à 11:34:28

    Bonjour,

    Je sais très bien que les useEffect permettent d'effectuer une action à un moment donné du cycle de vie des composants (fonctions) et qu'ils ne sont utilisables que dans les fonctions. Le cycle de vie (componentDidMount, componentDidUpdate,etcomponentWillUnmount.) des composants Reactjs est très bien perceptible dans les composants de type class. Mon problème se situe au niveau des composants de type fonctions.comment distinguer parfaitement ces étapes de cycle de vie dans un composant de type fonction c'est à dire agir quand le composant est monté, mise a jour et démonté.je souhaiterai comprendre parfaitement les choses puisque useEffect englobe toutes ces étapes du cycle de vie.

    Merci

    -
    Edité par beza88 14 septembre 2021 à 11:44:25

    • Partager sur Facebook
    • Partager sur Twitter
    A Vaincre sans péril on finit par triompher sans gloire  ->  le Cid de corneille
      16 septembre 2021 à 19:52:50

      Salut, useEffect est composé de 3 parties, pas toutes obligatoires.

      useEffect(()=>{
       /*Ton code...partie 1 correspond au mount*/
       return ()=> {} // partie 2 correspond au unmount
       ,[]}) //partie 3 les crochets servant au update


      Dans la partie 1, tu mets tout ce que tu as besoin de monter, des refs, des animations, des addEventListener, des setTimeout, fetch....

      Dans la partie 2, qui n'est pas obligatoire, c'est le cleaner qui est le return de la fonction useEffect, ici tu nettoies tes listeners et timer.

      Dans les crochets de la partie 3, tu mets les variables à suivre par le useEffect, si une variable est modifiée, le useEffect est relancé. Si tu mets des crochets vides, le useEffect ne sera executé qu'une seule fois au montage.

      useEffect(()=>{
      window.addEventListener("click", handle);
      
      return ()=> window.removeEventListener("click",handle);
      },[props.isChanged])



      -
      Edité par NadfriJS 16 septembre 2021 à 19:54:40

      • Partager sur Facebook
      • Partager sur Twitter

      La meilleure solution est toujours la plus simple. Ma chaîne Youtube [Tutos pour débutants]

        17 septembre 2021 à 14:53:26

        NadfriJS a écrit:

        Salut, useEffect est composé de 3 parties, pas toutes obligatoires.

        useEffect(()=>{
         /*Ton code...partie 1 correspond au mount*/
         return ()=> {} // partie 2 correspond au unmount
         ,[]}) //partie 3 les crochets servant au update


        Dans la partie 1, tu mets tout ce que tu as besoin de monter, des refs, des animations, des addEventListener, des setTimeout, fetch....

        Dans la partie 2, qui n'est pas obligatoire, c'est le cleaner qui est le return de la fonction useEffect, ici tu nettoies tes listeners et timer.

        Dans les crochets de la partie 3, tu mets les variables à suivre par le useEffect, si une variable est modifiée, le useEffect est relancé. Si tu mets des crochets vides, le useEffect ne sera executé qu'une seule fois au montage.

        useEffect(()=>{
        window.addEventListener("click", handle);
        
        return ()=> window.removeEventListener("click",handle);
        },[props.isChanged])



        -
        Edité par NadfriJS il y a environ 18 heures


        Salut,

        Merci pour les éclaircissements !!!

        merci

        • Partager sur Facebook
        • Partager sur Twitter
        A Vaincre sans péril on finit par triompher sans gloire  ->  le Cid de corneille

        cycle de vie et Hooks [useEffect]

        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
        • Editeur
        • Markdown