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

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

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