- 25
- 256 216
ViDev
เข้าร่วมเมื่อ 14 มี.ค. 2022
Moi c’est ViDev, Formateur et Lead Dev React (plus d'info 👇)
Sur cette chaine, tu trouveras des conseils qu'on ne voit qu'EN ENTREPRISE.
🎯 Mon but : aider les reconvertis à décrocher leur prochain job de dev React.
⛔️ Chaine zéro bullshit
🍹 Ancien barman devenu devs
Sur cette chaine, tu trouveras des conseils qu'on ne voit qu'EN ENTREPRISE.
🎯 Mon but : aider les reconvertis à décrocher leur prochain job de dev React.
⛔️ Chaine zéro bullshit
🍹 Ancien barman devenu devs
useEffect : à quoi sert la CLEAN UP FUNCTION en 2024 (hook React)
Des cas pratiques d'utilisation de useEffect :
videv.podia.com/useeffect-cleanup-function
Chapitrage :
00:00 Intro
00:16 Rappel de useEffect (3 phases)
LA CLEAN UP FUNCTION (useEffect)
04:22 clean up function (théorie)
14:48 clean up function (résumé)
17:28 clean up function (Coding Game / test technique)
Lien vers la précédente vidéo sur usEffect :
th-cam.com/video/G0KddxweHV0/w-d-xo.html
Est-ce que la clean up sert à quelque chose ?
Peut on l'ignorer ?
Oui en soi mais il peut ressortir en test technique. Donc on va voir ça aujourd'hui.
Apprends à maîtriser useEffect en profondeur avec cette vidéo sur la clean up function et le concept de unmounting du composant. Je te montre comment gérer proprement les effets secondaires et éviter les fuites de mémoire dans tes applications React. Que tu sois en reconversion ou que tu cherches à renforcer tes compétences, cette vidéo est parfaite pour toi. Prépare-toi à optimiser ton code et à devenir un expert en useEffect.
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 :)
#reactjs #reacthooks #useeffect #unmounting
videv.podia.com/useeffect-cleanup-function
Chapitrage :
00:00 Intro
00:16 Rappel de useEffect (3 phases)
LA CLEAN UP FUNCTION (useEffect)
04:22 clean up function (théorie)
14:48 clean up function (résumé)
17:28 clean up function (Coding Game / test technique)
Lien vers la précédente vidéo sur usEffect :
th-cam.com/video/G0KddxweHV0/w-d-xo.html
Est-ce que la clean up sert à quelque chose ?
Peut on l'ignorer ?
Oui en soi mais il peut ressortir en test technique. Donc on va voir ça aujourd'hui.
Apprends à maîtriser useEffect en profondeur avec cette vidéo sur la clean up function et le concept de unmounting du composant. Je te montre comment gérer proprement les effets secondaires et éviter les fuites de mémoire dans tes applications React. Que tu sois en reconversion ou que tu cherches à renforcer tes compétences, cette vidéo est parfaite pour toi. Prépare-toi à optimiser ton code et à devenir un expert en useEffect.
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 :)
#reactjs #reacthooks #useeffect #unmounting
มุมมอง: 931
วีดีโอ
La manière AVANCÉE d'utiliser useContext en entreprise (en 2024)
มุมมอง 1.6K21 วันที่ผ่านมา
Lien vers la vidéo précédente : th-cam.com/video/GXYvtczB0pk/w-d-xo.html Chapitrage 00:00 Intro 00:34 Optimisation 1 09:15 Optimisation 2 Dans cette vidéo, on plonge dans l’utilisation avancée de useContext pour optimiser ton application. On va te montrer comment créer et utiliser des custom hooks pour une installation et une consommation du context plus efficaces. Je vais te montrer comment cr...
useContext : la solution au props drilling
มุมมอง 2.4Kหลายเดือนก่อน
👉 La suite du cours, c'est ici : videv.podia.com/usecontext-suite Cette vidéo t'offre une exploration approfondie du hook useContext de React. Tu découvriras d'abord quel problème useContext aide à résoudre dans les applications React. Ensuite, on examinera comment useContext fonctionne en théorie pour te donner une compréhension solide de ses principes. Finalement, on abordera des exemples de ...
useEffect : le niveau AVANCÉ que tu dois avoir en entreprise (mentoring)
มุมมอง 5Kหลายเดือนก่อน
👉 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-un-pro-formation 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 ...
GIT : résoudre un MERGE CONFLICT sans PANIQUER (cas pratique)
มุมมอง 1.9K2 หลายเดือนก่อน
✉️ Pour être formé à GIT comme Inès, c'est par là : videv.podia.com/git-merge-conflict Cette vidéo est un extrait de ma formation REACT EN ENTREPRISE où j'explique à Inès comment résoudre rapidement et efficacement un conflit de merge Git en 2 minutes. Les conflits de merge peuvent sembler intimidants, mais avec mes astuces et techniques, tu seras en mesure de les gérer comme un pro en un rien ...
FRONTEND : livrer ton travail au PIXEL PRÈS.
มุมมอง 4.6K2 หลายเดือนก่อน
👉 ENTRAINE-TOI ici sur de VRAIES maquettes Figma professionnelles : videv.podia.com/figma-react Chapitrage : 00:00 Intro 01:12 1. Discerner le degré de rigueur attendu 03:01 2. L'œil de Frontend 04:28 3. Extraire les infos de la maquette 05:42 4. Design system : comprendre et l’utiliser 07:44 5. Être proactif vis-à-vis de la maquette 10:02 6. Secret BONUS Apprends à devenir un développeur front...
DÉVELOPPEURS : qui seront tes COLLÈGUES en entreprise ?
มุมมอง 2.2K3 หลายเดือนก่อน
DÉVELOPPEURS : qui seront tes COLLÈGUES en entreprise ?
GIT : ce qu'un LEAD attend de TOI en entreprise
มุมมอง 8K3 หลายเดือนก่อน
GIT : ce qu'un LEAD attend de TOI en entreprise
Apprendre TYPESCRIPT en 1 HEURE (l'ESSENTIEL en 2024)
มุมมอง 11K5 หลายเดือนก่อน
Apprendre TYPESCRIPT en 1 HEURE (l'ESSENTIEL en 2024)
REACT.JS : témoignages après ma formation
มุมมอง 2.6K8 หลายเดือนก่อน
REACT.JS : témoignages après ma formation
LA MEILLEURE ROADMAP REACT.JS POUR AUTODIDACTES (2024)
มุมมอง 12Kปีที่แล้ว
LA MEILLEURE ROADMAP REACT.JS POUR AUTODIDACTES (2024)
Devenir développeur MÊME avec un job à côté.
มุมมอง 7K2 ปีที่แล้ว
Devenir développeur MÊME avec un job à côté.
Apprendre REACT.JS en 1 HEURE (l'ESSENTIEL en 2024)
มุมมอง 171K2 ปีที่แล้ว
Apprendre REACT.JS en 1 HEURE (l'ESSENTIEL en 2024)
Ma formation REACT.JS : va ENCORE plus loin
มุมมอง 13K2 ปีที่แล้ว
Ma formation REACT.JS : va ENCORE plus loin
Salut vi, Je viens de savoir que notre université enseigne Vue.js . Connais tu un lead dev Vue.js ?😊
Super vidéo !!! Je l'ai pas encore fini mais vu les dizaines autres vidéo que je me suis tapé avance sur typescript. Vraiment super !!! J'accroche tous de suite. Bravo !!! Excellent travail
Merci beaucoup c'est tres claire
Salut, super tes vidéos tu es fort dans l'approche que tu fait, j'apprend bien plus vite et c'est stimulant. As tu un discord pour la commu de cette chaine? Ou peux-tu en en créer un? Sa rassemblerait les gens plus ou moins du même niveau et peut-être permettre de trouver des mentors. En tout cas merci pour tes vidéos. Continue comme ça!
comme d'habitude, ta vidéo est une masterclass. merci pour ce que tu fais. big up ✊
Bonjour avoir regarder cette revu de code. Cela me permet de comprendre les axes de progrès a suivre. Certes je suis sorti d'un bootcamp, mais jamais le formateur est revenu sur un code. Nous montrer les bonnes pratiques. Certes je suis passé seul a coder avec typescript, aujourd'hui j'apprends spring boot et Angular. Mais cette vidéo me fait prendre conscience que j'ai du chemin encore. Non pas dans la connaissance de React, mais de perfectionner mon aborescence et cette vidéo m'a montré quelques points que j'ai vu sur Angular. Enfin merci de cette video.
Merci Joanny pour ton long message 😲Il m'a fait grave plaisir :)) Ça me rend heureux de voir que mes vidéos aident sincèrement les gens à gagner du level :)
@@videv9858 Heureux si cela a fait ton dimanche ☺. Je me suis abonné et je lâcherai un petit mot sur Linkedin parmi les quelques juniors que je côtoie si cela peut faire monter ta chaine...
Merci. petite question je croyais qu on faisait appel à useEffect cat on appelait une API et donc qu on faisait de l asynchrone.
En général ta fonction de getAPI serait asynchrone pour attendre la réponse du server avant la mise à jour du state qui contient l’état des datas .. On utilise surtout useEffect pour remettre à jour le composant afin d’afficher les nouvelles valeurs du state qui a été mis à jour par la réponse de la fonction getAPi Mais comme l’explique ViDev dans cette vidéo, si la mise à jour du state (l’appel de la fonction getAPI) est provoquée par un clique bouton, pas besoin de useEffect
Merci pour cette video, ca m'a beaucoup aidé surtout pour générer le type d'un event ou je galerai à CHAQUE fois ! ... maintenant je serais un pro du typage implicite !
@@Joker5150 suuu suuuuuu !! 🔥 💪
Je regarde à nouveau ton live et je me dis que Philippe devrait trop prendre ton pack vidéo ..
C'est prevu. Pas pour cette fois malheureusement mais j'espere la prochaine session. Ceci dit, je serais curieux de connaitre la raison de ton commentaire, t'inquiete je ne suis pas susceptible, j'accepte toutes les critiques constructives. D'ailleurs depuis ce live, j'ai deja adopté de nouvelles pratiques comme par exemple l'utilisation systematique de git, et la refactorisation systematique en composants reutilisables. Par contre je n'ai pas encore switché sur Typescript, un gros morceau pour moi que je prefere laisser pour plus tard
@@philippec4448 hey salut ! Pour te dire je trouve que tu as une bonne approche pour t’organiser. Il te manque juste les best practices (que j’ai appris avec Vi à l’époque). Dans sa formation on est sur 15 tickets et du ticket 7 au 15 on apprend beaucoup à organiser le code de façon claire et modulaire. Pour moi si tu fais son projet, tu auras pas de mal à créer tes propres projets sur la base de sa structure. Après j’avoue que son pack vidéo est à 700€ et c’est pas donné non plus donc ça se comprend .. mais moi lorsque commencé, je me suis dis qu’un plombier doit bien acheter du matériel avant de travailler.. donc ça fait un peu parti du matériel 😅😅 Sinon bravo ! Ton projet est bien codé, il te faut progresser en UI-UX mais à la limite c’est pas grave car en entreprise on a souvent les maquettes du designer donc tu as juste à connaître figma .. 😊 En tout cas continue ! Ne lâches pas le dev il manque plus grand chose 🏋️♂️
Bonjour, peut ton cree un useEffect juste pour la phase d'update du conposent ?
si t'en as vraiment besoin, oui. Sinon, essaie de voir si tu peux pas juste passer par un gestionnaire d'événement (handleClick, handleSubmit, handleChange, etc.)
Hello big j'ai suivi tes autres videos vivement que tu nous montre les autres concepts 😁pour être au complet
Tkt, c'est dans le four 🥧
Salut big dans ta vidéo tu as parlé d'une vidéo concernant comment utiliser React en entreprise j'aimerai savoir si c'est de React en 1H dont tu parles??
Nan, il ne s'agissait pas à ce moment là de React en 1h, il s'agisait de ma formation React En Entreprise dispo ici en entrant ton email : videv.podia.com/react-comme-un-pro-formation
@@videv9858 Aah ok je me suis deja inscrit chap
Super live ! ❤
@@PikminPiPi merci petit pikminoux
Waoh toujours claire et concis stp peux tu faire une playlist sur les nouveautés de React (c'est à dire la dernière version de react) et aussi je ne sais pas si tu connais Next Js si oui es ce que tu peux faire une playlists sur ça j'ai remarqué c'est plus demandé dans les offres d'emploi Encore une fois merci de nous donner l'envie de progresser plus dans la programmation
Merci ! Je note, je note ✍
Salut Vi, ta formation react en entreprise ce n'est plus dispo? il est où le lien ainsi que l'info prix et paiement. C'est super ta formation, Merci Vi
Si bien sûr, voici le lien mister : videv.podia.com/6d6ffb08-c48a-432a-ac01-ac9c14c22cd6
Un plaisir de toujours suivre tes vidéos
Su suuuuu ! 🔥😊
Un plaisir de toujours te suivre vivement d'autres concepts à utiliser en react (en entreprise)
Merci mister :))
ok tu ne peux pas updater un composant démonté alors pourquoi le componentWillUnount intervient avant le componentDidUpdate?
mince, j'ai supprimé ma 1e (longue) réponse alors que c'était la réponse à cette 2e quesiton que t'es en train de poser 😭
en gros le composant est démonté puis remonté avec la nouvelle valeur du state. C'est ça qui donne le rendu updaté / actualisé.
@@videv9858 Ah ok donc on peut remonter un composant qui n existe plus
donc finalement il meurt pas vraiment le composant
@@marielauredebeaune1780 il "meurt" et "est ressucité avec la nouvelle valeur du state". Et là, quand ça arrive, tu termines un premier "cycle" de vie. Et ce cycle va ensuite se reproduire avec une nouvelle "naissance" (MOUNTING) avec la nouvelle valeur du state , etc. Mais c'est non il ne meurt pas définitivement.
Merci. petite question: comment peut il updater un composant demonté? cdt
@@marielauredebeaune1780 ah mince j’ai mal lu ta question. Voici ma vraie réponse : non. Il ne peut pas updater un composant DÉFINITIVEMENT démonté.
@@videv9858 alors pourquoi le componentDidUnmount intervient avant le componentDidUpdate?
Non Gars 😍 c'est du lourd🔥🔥j'ai vraiment aimé ta vidéo on comprend en profondeur la notion de useEffect merci à toi si tu peux faire une playlists sur la dernière version de React avec ce qui a changé et aussi je ne sais pas si tu utilises NextJs j'ai remarqué que c'est beaucoup plus demandé actuellement par les entreprises donc stp si tu pouvais faire une playlist sur NextJs ça serai cool et encore une fois merci à toi pour tes vidéos ça aide beaucoup
Une question Vi, je sais que c’est un extrait de formation et que tu as du continué les modifications, mais sur la base de cet extrait, est-ce qu’on ne pouvais pas garder un seule useEffect qui englobe la logique des deux useEffect ? Car il n’y a pas de modifications du setter counterStateA dans le premier useEffect donc rien ne l’empêche d’être déplacé dans le deuxième useEffect et supprimer le premier ?
Salut big merci pour la video c'était très instructif peux tu faire une playlist sur les nouveautés de react 18
J'ai fini la vidéo, j'avoue ne pas trop avoir aimé, vers la fin il fallait prendre en exemple un cas d'utilisation plus concret comme avec un fetch dans un use effect, la on aurait vu le abort etc
@@kenshinhimura3140 j’avoue j’aurai pu mais il m’aurait fallu plus de preparation et là vaut mieux une autre vidéo à part car faut plus de préparation pour l’exemple. Là au moins, la vidéo n’est pas trop longue. La suite dans une prochaine vidéo mister Kenshin :)
@@videv9858 je suis un peu dur le frère désolé tu as raison, c'est un sujet vaste. De plus pour me contredire moi même, il faut avouer que le fetch dans un useeffect devient de plus en plus rare avec react query et le sera encore plus avec le hook use de react 19
Ah super, je t'en avais parlé dans ta dernière vidéo. J'ai une question, doit on obligatoirement faire un clean up dans tous les useeffect ?
@@kenshinhimura3140 nan nan, pas du tout. C’est pas obligatoire. Mais pour bien comprendre, en effet, faudrait une vidéo avec un exemple plus poussé que ce que tu vois là dans la vidéo
Merci Chef pour t'es vidéo, tu assure vraiment ! 🤗
Merci SuperCoolNinja ❤
Ah belle journée, s'il y'a une vidéo de vi c'est une journée où je sais que je vais apprendre qlq chose vraiment en profondeur merci vi
Su suuuu Kariiiiim !! Merci 🙏
meilleur tuto typescript all time , mec merci beaucoup , go suivre les autres tutos
Merci Flames :)
Merci merci merci
Merci à toi :)
Bonjour je fini tout juste une formation dwwm mais je souhaite aller plus loin je me sens pas prêt pour aller dans le taf direct mais e .même temps je me dit quand est- ce que je serai prêt? est-ce que c'est quand on commence à être à l'aise avec tous les aspects du dev sans maîtriser mais un savoir faire sur chaque aspect HTML, CSS JavaScript react PHP node.js symfony et autres chacun sa stack mais vraiment j'ai l'impression d'avoir beaucoup chose mais en même temps savoir rien en regardant des vrais projets entreprises alors comment faire le tri de tout ça ? Merci en tout cas de nous permettre d'avoir un regard autre sur le métier et ce que l'on entend à droite à gauche
Excellente vidéo, on ne trouve pas beaucoup ce genre de concepts de review qui peut aider à faire progresser les apprenants en insistant sur les bonnes pratiques.
Merci Nico ❤
Merci Vi pour la review !! Rare de voir ce genre de vidéo car en te regardant coder on apprend pas mal 🎉
Avec plaisir, c'est le but ! J'en referrai d'autres 😊
Vraiment cool 😁
Merci Gaby !
Mec il nous faut plus de video comme sa, sa nous explique bien react et ta manière d'expliquer est tres claire !
Merci merci ! :))
Vi ! Si je t’envoie mon repo et qu’il est clean, tu pourras m’embaucher pour de vrai ? 🥹🙃🥳
Si tu m'envoies ton repo et que je vois que c'est toi, même pas je l'ouvre 🫣
@@videv9858 🤣🤣🤣🤣🤣
@@videv9858😩😩😩
Quel est le nom de ce thème VScode orange et vert? (blanka?)
Cobalt2 🎩
@@videv9858 Super merci
Nickel de voir les deux versions (avec la vidéo précédente). Merci
Merci à toi Virginie :)
Hyper intéressant comme analyse de projets. Merçi Franchement un collègue comme toi ça doit être le feu !!!
Merci Dypser, super sympa ton commentaire ! 😃
Concept très enrichissant. J'adore !
Merci Anthony :)
Le fait d'avoir que 3 commit me choque pas. Dans mes projets, la config par defaut du git c'est - delete branch on merge - squash Donc pour une branche avec 200 commits, elle sera squash en un seul quand on merge et la branch originale est supprimee. Ca evite d'avoir un master incomprehensible ou les commits intermediaires de plusieurs branches sont entremeles, avec des commit a la con genre fix, fix, fix, fix... C'est d'autant plus important que quand tu dois rollback une feature, si tu dois retrouver les 200 commits qui lui correspondent, t'es dans la merde. Quand c'est squash dans un seul, t'as qu'un commit a revert. Apres, avec mes devs, je suis un nazi sur l'historique, meme dans les branches. Si tu request une review sur une branche ou ya pleins de commits "fix fix fix", tu te prends une mandale. C'est ok d'avoir des commit temporaires quand tu cherches a resoudre un bug (particulierement quand t'arrives a reproduire qu'en staging) mais quand le bug est resolu, un coup de rebase interactive pour merge tous les commit foireux avec un vrai nom. Pareil, les commits "fix specs", c'est taquet. Tu trouves le commit qui pete les specs et tu l'edit. Si quelqu'un se demande pourquoi, la raison est simple. Allez review une branche avec 2 semaines de dev dedans (donc des milliers de modifs) sans y aller commit par commit. C'est l'enfer. 38:30 "bonnes technos => redux" en 2024??? Genre useReducer? non?
En soi, tu as raison. Chez nous aussi on git squash les commits avant de merger. Mais là, c'était dans un but pédagogique et de montrer au lead dev que le candidat (ici, Phillipe) savait utiliser git. Et l'histoire m'a donné raison : le dev en question (i.e. Phillipe) ne faisait pas beaucoup de commits, pas par choix, mais par oubli ou parce qu'il n'est pas à l'aise avec git de manière générale. Redux Toolkit* monsieur, ça change tout. Et check du côté software craftmanship, redux et redux toolkit sont très utilisés (si ce n'est, "la" solution de référence). Au dela de ça, c'est une "bonne techno" surtout parce que ça recrute bien sur du redux. Check les offres d'emploi, c'est pas toujours React Query ou Zustand ou autre qui sont demandés. Redux est encore très souvent demandé. Et useReducer, ça sert à rien. C'est hyper couplé à React et c'est juste une pâle copie de Redux mais dans le monde de React en moins bien. Autant prendre le vrai Redux. "Oui mais gneu gneu installer Redux , c'est lourd, tu installes une lib pour rien" ==> l'optimisation des packages, c'est pas l'enjeu ici. L'enjeu c'est de décrocher un job après une reconversion. Donc si faut installer redux (toolkit) pour montrer qu'on sait l'utiliser, j'encourage à le faire. C'est pas les opti sur les tailles de package qui vont payer les factures.
@@videv9858 Je dois confesser je connais pas du tout l'etat du marche du dev FE en france (puisque jy vis pas) Apres, on va pas lancer un debat sur l'opti des tailles de package, c'est javascript, je vais devenir maboule en 2s tellement la gestion des dependences de ce langage me sort par tous les orifices ;)
Oui , frère vi perso j'aimerais revoir plus souvent ce genre de format et celui d'avant usage de usehook...et tous ce qui est concepte un peu flou sur reatct ou JavaScript ou même typescript
1:12:00 Ce n'est pas une faille de sécurité de stocker le token "en clair" dans le state ? N'est ce pas préférable de stocker le token hashé ?
Super le codeReview je me suis retrouvé et j'acquis les bonne pratique Autodidacte depuis le Benin vi Merci beaucoup
Merci Vi t’es le meilleur 🙏🏽
Merci Hervé :)
"Vous arrêtez ça hein ! " xD
Et encore là il est gentil .. tu l’as pas vu en mentoring 😂😂😂😂
@@dev1l0ux j’espère que t’as bien senti ma frustration quand j’ai dit ça 😭
Bonjour Vi merci pour ce live très instructif, j'avais une question concernant l'employabilité d'un candidat ,est-ce que l'âge est-il un frein pour trouver un emploi dans la tech surtout si celui-ci vient d'une reconversion professionnelle et aurrait les bonnes pratiques professionnelles comme celles de ta formation ? 😊
La personne la plus âgée que je connais et qui a réussi à trouver un job après reconversion avait 42 ans. Après, je connais pas.
@@videv9858 merci pour ta réponse !
@@videv9858 Mince j'en suis à déjà à 49 😅
@@yanb4315 L'âge ça peut jouer mais si t'es suffisamment bon et que tu coches toutes les cases, l'âge ils s'en moquent complètement tellement on a du mal à trouver des bons devs.
Ohhh my god ,j'ai rater le live ,j'ai pas reçu de notification,comment ca se fait
C'est ma faute, je l'ai mis en "non repertoriée" sans faire exprès 😭
C'est oas grave bro ,ca arrive
Super concept ! Et merci pour la review !
Avec plaisir monsieur ! 🎩
Merci pour le code review. Je vais pouvoir améliorer mon code avec les conseils que tu m as donner. 👍 ça me boost a persévérer malgré les difficultés à trouver un job
Yes, courage ! T'es pas loin du niveau qu'on attend !
toujours top
merci :)
merci merci merci
mercis.map((merci) => console.log("Merci Ammar 🫶"))