useEffect : le niveau AVANCÃ que tu dois avoir en entreprise (mentoring)
āļāļąāļ
- āđāļāļĒāđāļāļĢāđāđāļĄāļ·āđāļ 13 āļ.āļ. 2024
- ð 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 TH-cam
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
Dites moi si vous aimez ce format de vidÃĐo mentoring et si vous voulez que je reproduis cela dans mes futurs vidÃĐos :)
On veut plus ++++++ ce genre de format widev ðĨ° tu est un grand prof
widev == oui dev
Merci pour cette vidÃĐo c'est tellement plus clair le useEffect avec toi ^^
merci Remy ! ðð
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
Hahaha c'est gentil ! Merci pour ton commentaire. C'est un grand plaisir si mes vidÃĐos t'aident. La suite arrive ! :))
@@videv9858 ð
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 ð
Merci pour ton commentaire ! Yes, je note â
Encore bravo pour ces explications incroyables!
Merci !!! âĪ
C'est une masterClass, j'avais jamais compris useEffect de cette façon
hahah merci ! et oui, les premiÃĻres secondes dela vidÃĐo disaient vrai ! :))
Nous voulons la suite mon cher prof s'il vous plaÃŪt âĪ
Merci beaucoup pour cette vidÃĐo, l'explication est vraiment claire
Merci pour ton commentaire ð
Je m'abonne !
J'aime bien ta façon d'expliquer
Merci Moustapha ð ð
Franchement c'est une masterclass , merci infiniment
Merci à toi pour ton commentaire sympa ð
grace à toi j'ai bien compris le concept des useEffects et du re-render / render souvent ça fatigue en rÃĐact ðŠ
Merci Emmanuel âĪ
Super video
Merciii ð ð
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
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 ð
Du coup, t'avais pleins de questions en ðĨ
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
â@@videv9858avec plaisir frÃĻre
â@@videv9858ah maintenant useEffect()=>{useMemo(affaireClasseÃĐ), [hhhh] },merci vi
Grand merci ð
Merci pour ton commentaire :)
Bon je viens de recevoir la notif !
Je vais bien visionner ça a la maison devant la citronnade ð
Merci Vi.
Mdr ð
à la tienne ðŧ
Merci pour cette vidÃĐo Vi !
J'espÃĻre qu'il y aura aussi une vidÃĐo qui traitera de Redux dans l'avenir ð
Oui c'est prÃĐvu âĪïļ
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 ðŊ
@@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 ð
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.
c'est presque exact. La clean up function (callback de nettoyage) est appelÃĐe "juste avant" (et pas "Ã ") la mort du composant
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 ð
T'as pas idÃĐe comment ton commentaire m'a fait plaisir Waly. Merci ð
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
Toi ça se voit que t'es un vrai dev en poste ðŊ
@@videv9858 Jâai ÃĐtÃĐ bien formÃĐ tkt ð
@@videv9858 mdr et lâÃĐlÃĻve a dÃĐpassÃĐ le maÃŪtre ð
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 !!!!!
Avec de la chance la semaine qui arrive si jâarrive à tout boucler ahhah
Question : tâas pas trouvÃĐ Ã§a trop long 52 min ? ð
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 ?
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
Bonjour et merci pour cette vidÃĐo, peut-on mettre une autre variable qu'un ÃĐtat dans le tableau de dÃĐpendances de UseEffect()?
Tu as regardÃĐ la vidÃĐo jusqu'Ã la fin ? Tu as la rÃĐponse dedans.
@@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".
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.
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
Yes et aussi parce que c'est une variable "Let" (qui, donc, n'est jamais "surveillÃĐ" par useEffect)
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()?
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.
Salut ViDev ! Tu fais du mentoring ? ðą Comment en bÃĐnÃĐficier si jamais câest possible ? ð
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 :)
Meme chose pour usestate please
Je parle dÃĐjà de useState dans ma vidÃĐo "React en 1h" sur youtube : th-cam.com/video/h2a0cSC1Vz8/w-d-xo.htmlsi=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 ?
@@videv9858 dans les differents car un peu comme tu as fait avec useeffect, genre avec usestate comment recuperer les donnÃĐes d'un API,....
Le retour du chinois, trop bien.
Oh le retour du belge !! ð
C'est trÃĻs moyen ton commentaire. J'ÃĐtais habituÃĐ Ã des commentaires plus respectueux venant de toi.
@@videv9858 pardon je m'excuse. Tu m'as beaucoup aidÃĐ avec tes vidÃĐos, il faut pas faire l'ingrat j'avoue.
@@kenshinhimura3140 merci ce message, jâapprÃĐcie.
Je comprends pourquoi à chaque fois que je fais un console log du state je rÃĐcupÃĻre deux fois la mÊme information
Tkt, moi aussi j'ai eu ce moment de prise de conscience hahaha
Attention ça peut Être le strict mode aussi qui provoque ça ð
@@Stefoux ah bien jouÃĐ, aussi ! Tâes fort toi StÃĐfoux ! Tu devrais tâappeler : ÂŦ StÃĐfort Âŧ
@@videv9858ð
@@adambates1333 je vais te passer le microphone ðĪ
2:13 pourquoi on lâappel le riz render ? ð
Pour riz goler ð
@@PikminPiPi jâaime bien
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
Câest ÃĐvident que tu nâas pas regardÃĐ la vidÃĐo jusquâà la fin.
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.
ÂŦ 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.
Je viens de la finir effectivement.
Wouah lala ça y est le mec veut ma peau maintenant mdr.
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.
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.
Tâas du te tromper de chaÃŪne TH-cam 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
Mdrr tu tire a balle rÃĐelle jâaime bien ðð
@@Stefouxon sait que câest ton deuxiÃĻme compte videv arrÊte
â@@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 ð
@@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 âĶ
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.
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.
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 ðð
â@@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 ;)
@@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.