useEffect : le niveau AVANCÉ que tu dois avoir en entreprise (mentoring)

👉 La suite du cours sur useEffect, c'est par là :
videv.podia.com/useeffect-suite
👉 Ma formation React En Entreprise :
videv.podia.com/react-comme-u...
Ici, tu vas apprendre useEffect FACILEMENT et de la bonne manière pour que tu puisses débugguer n'importe quelle situation une fois en poste. Cette vidéo avancée (extrait de ma formation REACT EN ENTREPRISE) t'explique en détail les trois phases clé du cycle de vie d’un composant : le mounting, l'updating et le unmounting du composant. Apprends à optimiser le rendu de tes composants pour des performances maximales et à gérer efficacement le cycle de vie avec useEffect. Que tu sois développeur intermédiaire ou avancé, cette vidéo te donnera toutes les clés pour exploiter pleinement le potentiel de React et améliorer la qualité de tes applications. Ne rate pas cette chance de maîtriser useEffect à un niveau avancé!
Chapitrage :
00:00 preview
00:30 l'erreur classique avec useEffect()
PRINCIPE DU USE EFFECT
00:40 les 3 phases du cycle de vie du composant
01:34 la double lecture à chaque phase
02:17 définition du render d'un composant (en React)
03:20 le nom de la lecture 2 en fonction des phases + anglais
06:10 le trigger pour le passage de MOUNTING à UPDATING
PHASE 1 : MOUNTING
08:07 c'est quoi le render ?
09:27 componentDidMount
12:24 le tableau de dépendances "vide"
PHASE 2 : UPDATING
18:00 componentDidUpdate (tableau de dépendances rempli)
22:05 le "if" intelligent
24:23 exclusion du let
27:49 métaphore du surveillant de permanence
32:55 le cas du infinite loop
40:07 question Didier : "mounting ≠ updating : pourquoi distinguer ces deux phases ?"
INTERLUDE
47:31 coup de gueule KZbin
48:43 le vrai nom des différents useEffect
PHASE 3 : UNMOUNTING
51:41 componentWillUnmount
N'oublie pas de liker cette vidéo si tu l'as trouvée utile, de t'abonner à la chaîne.
Je serai ravi de répondre à tes questions et je pourrai même faire des vidéos sur les questions que je juge pertinentes :)
👋 Retrouve mon quotidien de Lead Développeur React :
sur Twitter : / videvjs
#frontend #reactjs #useeffect #hook #mentoring #cycleDeVie #mounting #updating #unmounting

[@videv9858]

Dites moi si vous aimez ce format de vidéo mentoring et si vous voulez que je reproduis cela dans mes futurs vidéos :)

[@dlcovering3141]

Je suis en pleine reconversion professionnelle actuellement à la capsule. En ce moment nous sommes en plein sur react. Tu peux pas savoir à quel point tes vidéos me sauve sur la compréhension de react. J’en ai parlé à tout mon batch. Merci beaucoup videv 👏🏼. Happy Coding

[@videv9858]

Hahaha c'est gentil ! Merci pour ton commentaire. C'est un grand plaisir si mes vidéos t'aident. La suite arrive ! :))

[@dlcovering3141]

@@videv9858 👏

[@remybruno212]

Merci pour cette vidéo c'est tellement plus clair le useEffect avec toi ^^

[@videv9858]

merci Remy ! 🙏😊

[@emmanueldesirekouadio3568]

On veut plus ++++++ ce genre de format widev 🥰 tu est un grand prof

[@videv9858]

widev == oui dev

[@desireedeutou9635]

Franchement mes respects 🙌 J'ai tellement galéré à comprendre les subtilités du comportement de ce useEffect ! Bien sûr qu'on en veut plus de ce format de vidéos mentoring 😇! Thanks a lot 😉

[@videv9858]

Merci pour ton commentaire ! Yes, je note ✍

[@palomaaubeau2258]

Encore bravo pour ces explications incroyables!

[@videv9858]

Merci !!! ❤

[@user-vn6lj5qq6c]

C'est une masterClass, j'avais jamais compris useEffect de cette façon

[@videv9858]

hahah merci ! et oui, les premières secondes dela vidéo disaient vrai ! :))

[@aristoteiziri7737]

Merci beaucoup pour cette vidéo, l'explication est vraiment claire

[@videv9858]

Merci pour ton commentaire 😊

[@moustaphaotf]

Je m'abonne ! J'aime bien ta façon d'expliquer

[@videv9858]

Merci Moustapha 🙌 😃

[@MrMouniruss]

Franchement c'est une masterclass , merci infiniment

[@videv9858]

Merci à toi pour ton commentaire sympa 😊

[@marielauredebeaune1780]

tu vas dans le détail c'est cool. Merci

[@videv9858]

Tkt, on l'a décortiqué notre useEffect() #chirurgien

[@karimbouche3563]

La meilleur explication de la vie ,je regardais une vidéo de 1million et demi et en anglais et il parlait du mount aupdate et unmout du component mais ça expliquait pas aussi bien et en plus j'avais plein de questions en suspense et tu vien vi me sauver vraiment tu ma répondu a ttes mes questions de manière simple ,tu devrait nous faire des vidéos comme ça sur toutes les notions confuses sur les tous les reacts ,hooks ,sur react lui-même et même sur Javascript et je suis sur que ta chaine va décoller loin

[@videv9858]

Il est 06h30, je me réveille et je lis ce super commentaire venu de l'espace. Il me donne grave le sourire, merci Karim 🙏😃 Content de lire aussi que ça t'a débloqué sur useEffect. Ca marche, je vais voir pour refaire des formats comme ça 😊

[@videv9858]

Du coup, t'avais pleins de questions en 🥁

[@karimbouche3563]

Je t'assure vi frère on dirai que tu es entrer dans ma tête et t'as vue toutes les questions qu'ils y'avait, je commente rarement ,mais toi je commente toutes des vidéos , la première que j'ai découvert y'a environs 3 mois c'était celle de typescript et de suite je suis tomber amoureux de ta méthode de pédagogie, t'es pas Batman a la base , et tu c'est quoi je suis ingénieur en informatique à la base et depuis 2005 et la tes vidéos de react en 1h et typescript je les ai regarder 3 fois chaqu'une , enfin frère chapeau, je ne demande que de plus de vidéos bon continuation

[@karimbouche3563]

​@@videv9858avec plaisir frère

[@karimbouche3563]

​@@videv9858ah maintenant useEffect()=>{useMemo(affaireClasseé), [hhhh] },merci vi

[@adibout7684]

Super video

[@videv9858]

Merciii 🙏 😊

[@mohamedtaoufiq9999]

Nous voulons la suite mon cher prof s'il vous plaît ❤

[@emmanueldesirekouadio3568]

grace à toi j'ai bien compris le concept des useEffects et du re-render / render souvent ça fatigue en réact 😪

[@videv9858]

Merci Emmanuel ❤

[@DidouxXg]

Merci pour cette vidéo Vi ! J'espère qu'il y aura aussi une vidéo qui traitera de Redux dans l'avenir 😁

[@videv9858]

Oui c'est prévu ❤️

[@videv9858]

Peux tu me dire ce sur quoi tu as des blocages / difficultés avec Redux qui fait que t'aurais besoin de Redux ? comme ça je sais ce sur quoi j'ai besoin d'insister 💯

[@DidouxXg]

@@videv9858 J'ai compris le principe de Redux en lui même mais c'est plus côté code où c'est complexe de tout comprendre 🥲 A quoi sert un Reducer, comment on fait pour le mettre en place ? Peut on avoir plusieurs Reducers ? A propos des actions, faut-il les mettre dans le même fichier que le Reducer ? Quelles sont les best practices que ça soit au niveau de l'organisions du code ? Quelles sont les thermes techniques à connaitre ? Comme playload, provider, store, middleware, useSelector, dispatch etc Et pourquoi on recommande d'utiliser Redux Toolkit à la place de Redux ? Il y a-t-il des outils comme les extensions de navigateur qui peuvent être utile tel que Redux DevTools, comment ça marche et à quoi ça peut servir ? Peut-on utiliser useState en plus de Redux ? Peut on utiliser que des useState à certain moment ? (si une props est utile qu'à son composant enfant et nul par ailleurs) Ou est-il préférable de tout centraliser dans le store ? J'ai encore beaucoup de questions mais déjà là il y en a pas mal, il se peut que mes questions soient incohérente car je suis toujours en apprentissage sur Redux 😭

[@daulinnkonkam4815]

Grand merci 🎉

[@videv9858]

Merci pour ton commentaire :)

[@isma-bj8uo]

Bon je viens de recevoir la notif ! Je vais bien visionner ça a la maison devant la citronnade 🍋 Merci Vi.

[@Stefoux]

Mdr 😂

[@videv9858]

À la tienne 🍻

[@AkioJunichiro]

Moi on me l'avait expliquer comme ça : useEffect est un hook qui prend un callback et un tableau de dépendances, le callback est appelé à l'initialisation et au changement du contenue de ce tableau de dépendances (comprendre à chaque rendu, on regarde si les dependances ont changé si c'est le cas execution). Le callback retourne un callback dit de nettoyage qui est appelé à la mort du composant. Parcontre j'avais pas ce system de double lecture en tête, j'en tiendrais compte.

[@videv9858]

c'est presque exact. La clean up function (callback de nettoyage) est appelée "juste avant" (et pas "à") la mort du composant

[@Stefoux]

34:54 Ahahaha cette scène la !! C’est ma préférée 😂😂😂 50:24 - les rules of hook pour se sujet consiste à ne pas utiliser le hook useEffect dans un if .. Mais utiliser un if dans un useEffect ne casse pas les rules of hook .. D’ailleurs Vi si t’as bien remarqué, lorsque tu respectes pas les règles des hooks, (qui sont listées dans la doc React) ça crée un crash du render .. donc tu es certains que tu le verras car c’est red flag dans la console et une page blanche lol

[@videv9858]

Toi ça se voit que t'es un vrai dev en poste 💯

[@Stefoux]

@@videv9858 J’ai été bien formé tkt 😅

[@Stefoux]

@@videv9858 mdr et l’élève a dépassé le maître 😏

[@alsenydiallo2127]

Super bien expliqué c'est maintenant j'ai très bien compris le fonctionnement de useEffect. 5 étoiles à toi. Une question, as-tu une formation complete en react ?

[@videv9858]

Yes, rentre ton email ici et tu auras tout ce qu'il faut sur la formation React où on va bien plus en profondeur : videv.podia.com/react-comme-un-pro-formation

[@waly92]

Trés pédagogue, il y a l'information mais pas que, y a la manière aussi, et c'est ce qui fait perdurer l'info dans le cerveau .. Merci 👌

[@videv9858]

T'as pas idée comment ton commentaire m'a fait plaisir Waly. Merci 🙏

[@oussamabgrt1372]

J'ai sign up a la newsletter pour recevoir la fin de ton explication, quand est-ce que l'on recevra la suite ? Sinon continues, j'adore tes videos !!!!!

[@videv9858]

Avec de la chance la semaine qui arrive si j’arrive à tout boucler ahhah

[@videv9858]

Question : t’as pas trouvé ça trop long 52 min ? 👀

[@angeanicetkouassi2250]

Bonjour vi, s'il te plait j'ai pas bien compris la réponse a la question : quelle est la différence entre onChange(), handleChange() et useEffect()?

[@videv9858]

Qu'est-ce qui déclenche un comportement ? Si c'est une action de l'utilisateur (ex: la saisie d'un formulaire) ==> alors utilise l'événement onChange auquel tu branches un comportement handleChange(). Si c'est un changement de state (ex: "compteurState") ==> alors utilise useEffect() et tu mets "compteurState" dans le tableau de dépendances.

[@marielauredebeaune1780]

bjr merci A la29.21 quand tu mets compteurB dans le tableau de dépendance le componentdidupdate ne s affiche pas parce que il n'est pas dans la condition if du useeffect. Ai je bien compris? merci encore

[@videv9858]

Yes et aussi parce que c'est une variable "Let" (qui, donc, n'est jamais "surveillé" par useEffect)

[@jacquesclermont6132]

Bonjour et merci pour cette vidéo, peut-on mettre une autre variable qu'un état dans le tableau de dépendances de UseEffect()?

[@videv9858]

Tu as regardé la vidéo jusqu'à la fin ? Tu as la réponse dedans.

[@jacquesclermont6132]

@@videv9858 Oui je l'ai regardé, ça m'a peut-être échappé. Dans la vidéo, tu dis assez clairement qu'il faut que ce soit une valeur d'état qui soit utilisé dans le tableau de dépendance. Pourtant, j'ai déjà utilisé d'autres variables et notamment une variable générée par useParams() et cela fonctionne très bien. Attention, il est tout à fait possible voire très probable que je n'utilise pas les "bonnes pratiques".

[@jacquesclermont6132]

Oui, je l ai regardé mais je pense qu il y a une nuance qui m échappe. Dans la vidéo, tu dis clairement qu il faut que ce soit une valeur d état. Pourtant, j utilise par exemple une valeur issue de useParams() dans mon tableau de dépendance de mon useEffect pour recharger des données à chaque fois que l utilisateur change de pages et ça marche très bien. Je ne sais pas si j utilise les bonnes pratiques pour autant.

[@jacquesclermont6132]

​@@videv9858 Bonjour Vi. Oui, j'ai bien regardé la video jusqu'à la fin. Tu dis très clairement qu'il faut mettre une variable d'Etat dans le tableau de dépendances. Pourtant, la fin de la video me fait penser différemment. Dans mon exemple, moi j'utilise const { id } = useParams() dans mon tableau de dépendances. Lorsque l'utilisateur change de page, id change et me permet de remettre les données de la page à jour. Cela fonctionne pas mais il est plus que probable que je n'utilise pas les "bonnes pratiques". Bonne journée (en espérant que ma réponse soit mise à jour)

[@jacquesclermont6132]

@videv9858 Bonjour Vi. Oui, j'ai bien regardé la video jusqu'à la fin. Tu dis très clairement qu'il faut mettre une variable d'Etat dans le tableau de dépendances. Pourtant, la fin de la video me fait penser différemment. Dans mon exemple, moi j'utilise const { id } = useParams() dans mon tableau de dépendances. Lorsque l'utilisateur change de page, id change et me permet de remettre les données de la page à jour. Cela fonctionne pas mais il est plus que probable que je n'utilise pas les "bonnes pratiques". Bonne journée (en espérant que ma réponse soit mise à jour)

[@ParzivalEu_]

Salut ViDev ! Tu fais du mentoring ? 😱 Comment en bénéficier si jamais c’est possible ? 🙂

[@videv9858]

Va sur cette page : videv.podia.com/react-comme-un-pro-formation. Entre ton email et t'auras toutes les infos dont tu as besoin :)

[@kenshinhimura3140]

Le retour du chinois, trop bien.

[@Pikmin-Pi-Pi]

Oh le retour du belge !! 🎉

[@videv9858]

C'est très moyen ton commentaire. J'étais habitué à des commentaires plus respectueux venant de toi.

[@kenshinhimura3140]

@@videv9858 pardon je m'excuse. Tu m'as beaucoup aidé avec tes vidéos, il faut pas faire l'ingrat j'avoue.

[@videv9858]

@@kenshinhimura3140 merci ce message, j’apprécie.

[@kenlunguma2292]

Je comprends pourquoi à chaque fois que je fais un console log du state je récupère deux fois la même information

[@videv9858]

Tkt, moi aussi j'ai eu ce moment de prise de conscience hahaha

[@Stefoux]

Attention ça peut être le strict mode aussi qui provoque ça 😅

[@videv9858]

@@Stefoux ah bien joué, aussi ! T’es fort toi Stéfoux ! Tu devrais t’appeler : « Stéfort »

[@adambates1333]

@@videv9858😂

[@videv9858]

@@adambates1333 je vais te passer le microphone 🎤

[@lechampi2237]

Meme chose pour usestate please

[@videv9858]

Je parle déjà de useState dans ma vidéo "React en 1h" sur youtube : kzbin.info/www/bejne/nmPEYZaJeJaJsJosi=JvbyTv_FsXqGzVk8&t=629. Du coup, sur quels points précisément de useState aimerais-tu que je fasse une vidéo ? Sur quoi tu as du mal ?

[@lechampi2237]

@@videv9858 dans les differents car un peu comme tu as fait avec useeffect, genre avec usestate comment recuperer les données d'un API,....

[@marielauredebeaune1780]

Bonjour pourquoi il y a 2 niveaux de lecture? merci encore

[@videv9858]

C'est car l'équipe React a prévu ce comportement qui répond à un besoins des développeurs React

[@Pikmin-Pi-Pi]

2:13 pourquoi on l’appel le riz render ? 🍚

[@PikminPiPi]

Pour riz goler 🎉

[@videv9858]

@@PikminPiPi j’aime bien

[@kenshinhimura3140]

Bonne video mais il y a deux choses que je n'aime pas. D'une part on ne parle pas beaucoup de la cleanup fonction a la fin du useeffect notamment quand on fait u' fetch on que l'on doit utilisé le abort. Surtout que aujourd'hui il faut bien expliqué qu'il ne faut pas utiliser systèmatiquement le useeffect pour tout. Il fallait finir e' comparant le useeffect et le uselayouteffect

[@videv9858]

C’est évident que tu n’as pas regardé la vidéo jusqu’à la fin.

[@videv9858]

Et useLayoutEffect, c’est dit dans la doc officiel de react. T’en auras probablement jamais besoin. Alors pourquoi en parler ? Même toi, j’en suis sur que t’en as jamais eu besoin.

[@videv9858]

« Il faut bien expliquer qu’il ne pas utiliser le useEffect pour tout » mais sérieux, sois raisonnable. C’est dit dans les 8 premières secondes de la vidéo. Sois un minimum raisonnable dans ton commentaire.

[@kenshinhimura3140]

Je viens de la finir effectivement. Wouah lala ça y est le mec veut ma peau maintenant mdr.

[@kenshinhimura3140]

Par contre la cleanup fonction, c'est très important car elle nettoie le useeffect, sinon il y a deux la data est renvoyée deux fois.

[@Kosmix]

frero tu es le pire dev, aka le mec le moins étique du game, tu vend des formations "monitoring" à 2,4k€ (c'est le prix d'une ecole d'ingé privée à l'année mdrrr). "monitoring" : par un mec qui ne dev même pas les sites qu'il met en ligne(d'ailleur on ne sais meme pas si tu sais coder du react en dehors de todolist ou de counter), la qualitée de tes formations doit être à peu près similaire à la qualités des acteurs dans la vidéo et à la qualité des faux commentaires en dessous des formations, tu devrais avoir honte de vendre des "formations" à un prix pareils, à des pauvres gens. J'ai bon espoir que personne n'a acheté tes fichier webm et que tu es encore sur le Free tier de podia.

[@Stefoux]

T’as du te tromper de chaîne KZbin toi, déjà la formation c’est 800€. Et la plupart des gens qui ont suivi sa formation son en CDI (moi compris) Vu qu’on est dans les suppositions je te répond donc avec une supposition de ton style ; tu dois être un prof de la capsule toi … 😂😂😂😂 Arrête de spam stp

[@bieui]

Mdrr tu tire a balle réelle j’aime bien 😂😂

[@bieui]

@@Stefouxon sait que c’est ton deuxième compte videv arrête

[@Kosmix]

​@@Stefoux un iphone ou un fichier video de 5go, ptdrrr "juste 800€", udemy 13h de video => 15 balles. Tu me donnera le nom de la boite qui t a embauché que jla signal pour blanchiment d argent (j hesite là prc tu dois pas etre payé tre cher). 99.999% des boites (legales) embauche des gens diplômés, avec de l expérience. Donne moi 800e j t apprend le golang et le rust 😅

[@Stefoux]

@@Kosmix franchement ne te lance pas dans l’analyse financière c’est tout ça que je te dis. Si Udemy créait des emplois ça ce saurait.. mais tranquille reste avec gogoland de ton côté .. moi j’ai payé sa formation il y a quelques années et aujourd’hui je suis lead .. donc tranquille pour toi si tu veux try hard sur Udemy et consorts 😂😂 C’est vrai qu’elle a augmenté sa formation niveau prix j’avais pas vu .. par rapport avant, mais combien sont aujourd’hui en poste … Jvais pas te donner mon salaire ici mais on est tous entre 40 et 85k dans notre ancien Discord … donc bon … Après je te répond car tu es rigolos mais je te préviens maintenant que je passerai pas la soirée à parler avec toi pour comparer les tailles de slips …

[@BrainStroming1789]

C'est quoi ce délire de code qui s'exécute mais qui saute du code 😂😂😂 Déjà la "fonction flêche" s'appel une lambda. Toi qui dis aimer nommer les choses correctement... ça commence mal. Ensuite, la lambda (de son petit nom savant "fonction non nommé") ou la fonction nommé passé à useEffect, est mémorisé par l'appelant, car useEffect n'est qu'une méthode qui va mémorisé dans l'objet de l'appelant une référence sur cette méthode. Et pourquoi la lambda n'est pas appelé au "1er appel" ???? tout simplement parce qu'on ne fait que passer l'équivalant d'une adresse à useEffect et non une exécution. C'est bon vous suivez ?! Donc l'appelant, qui n'est autre qu'une machine à état qui exécute un "workflow" (oui moi aussi j'ai plein de mots savant 😂), à d'inscrit dans son comportement "quand le state change, si j'ai une référence de fonction mémorisé, alors j'appel l'exécution de cette référence". Dingue !!! mais comment qu'il fait ça ?! Hummmm je sais pas, avec un handler/event et du notification push qui va tester la variable private is _useEffet is not null then _useEffect() ¿? haaa bah ca semble pas mal 😂 Mais en AUCUN CAS LA METHODE OU CE TROUVE LE USEEFFECT N'EST RAPPELER EN SAUTANT DES LIGNES !!!! C'est du pure délire. Pour se faire prof d'info, il faut un minimum de sérieux, ou clairement l'afficher dans le titre.

[@videv9858]

Ouais, merci : grâce à toi, je préfère encore plus mon explication. “C’est bon vous suivez !?” 👉 Non. À ce stade là de ton "explication", personne ne te suit. Personne ne te comprend. Personne. T’es tout seul. Seul avec ton arrogance et ton jargon technique pompeux inutilement compliqué. La "lambda". "Fonction non nommée". "L'appelant.". '"Workflow". "Notification push". "Variable private". À quel moment tu crois 1 seconde et "sincèrement" que quelqu'un comprend ce que tu racontes ? C'est encore pire si cette personne est débutante avec useEffect. Et c'est pas en ricannant comme une hyène arrogante avec tes emojis que tu vas me faire croire que quelqu'un va piger ton "explication". D’ailleurs, c’est pas une explication que tu donnes : c'est une démo. Une démo de ton incompétence pédagogique et de ton manque d’empathie. Avec ton commentaire, tu représentes tous les PIRES profs que j'ai pu avoir dans TOUTE ma vie et qui ont fait le formateur que je suis aujourd'hui. Si tu ne devais retenir qu'une seule chose mec, retiens ça : C’est À CAUSE de mecs sans empathie et arrogants comme toi que tant de gens abandonnent le dev. C’est GRÂCE à des mecs sans empathie et arrogants comme toi que je suis devenu le formateur que je suis aujourd'hui. Du coup, merci à toi. Change rien mec, t'assures ❤ Bisou.

[@Stefoux]

Tu as un jolie nom mais en te lisant je me dis que les sessions de brainstorming c’est mieux si tu les fais tout seul .. .. Heureusement qu’il est pas prof lui.. il serait un prof lambda 😂😂

[@BrainStroming1789]

​@@Stefoux hoooo il a enfin été faire une recherche google sur les lambda fonction. Maintenant recherche "closure" parameter", mais le qi, pas sur que tu piege tou du con ;)

[@videv9858]

@@BrainStroming1789 maintenant TOI recherche : « comment avoir un cerveau et arrêter de répondre comme un demeuré ». Ça doit être le bon level de tuto pour toi. Et dès que t’as fini, retourne commenter sur les posts des autres vidéos et profite de ton weekend utilement au lieu d’insulter mes abonnés.