Mastering React's useEffect

  Переглядів 168,812

Jack Herrington

Jack Herrington

День тому

It's easier to write code that makes React's useEffect hook go off the rails than it is to write code that uses it the right way. Let's develop some strategies that you can use to make sure the useEffects you write always work when and how you expect them to work.
Code: github.com/jherr/taming-useef...
👉 I'm a host on the React Round-Up podcast: devchat.tv/podcasts/react-rou...
👉 Don't forget to subscribe to this channel for more updates: bit.ly/2E7drfJ
👉 Discord server signup: / discord
👉 VS Code theme and font? Night Wolf [black] and Operator Mono
👉 Terminal Theme and font? oh-my-posh with powerlevel10k_rainbow and SpaceMono NF
0:00 Introduction
0:27 Setup
1:38 Creating useFetch
6:42 [ DANGER ZONE ] Depending On Objects
7:30 All About References
13:17 Fixing Our Dependencies
15:16[ DANGER ZONE ] Function Dependencies
19:02 Quick Check-In
19:50 Cleanup Functions
21:25 Depending On State Mutated In The useEffect
24:51 Outroduction
#reactjs #useEffect

КОМЕНТАРІ: 397
@joonkim9302
@joonkim9302 2 роки тому
This is by far one of the most useful videos I have watched over my 10 years of youtube watching career. seriously. I wathced it twice yesterday, didn't get it. Rewatched today and get everything. Absolutely great video.
@jherr
@jherr 2 роки тому
Wow, thanks!
@ToddDunning
@ToddDunning 2 роки тому
Joon I see your 3 watch attempts and raise you two.
@zmrzlinazmrzlina2094
@zmrzlinazmrzlina2094 Рік тому
@@jherr Thanks for code included!
@yawn74
@yawn74 7 днів тому
I just watched this, and this video is trash literally there is no point to call use effect here when you can literally remove useEffect and call them normally.
@Crevulus
@Crevulus 2 роки тому
I thought I'd just about mastered useEffect but this taught me even more. Especially about what react does under the hood. Your videos are a goldmine.
@jaymarley6172
@jaymarley6172 2 роки тому
100% agree
@dragonslayerofhell1
@dragonslayerofhell1 2 роки тому
I had the exact same thought haha. He explains the concepts so well.
@aimanyounis8387
@aimanyounis8387 2 роки тому
He is expert
@sayantanmanna1360
@sayantanmanna1360 Рік тому
Kudos to UKposts algorithm for recommending this gold mine!! Every time I re-watch the same lecture, I learn something new from it. Even the shorts are too useful. Thanks for all your effort mate!!
@OleksandrDanylchenko2k
@OleksandrDanylchenko2k Рік тому
The useCallbackRef pattern is EXACTLY what I was missing in my mental puzzle to properly memoize passed functions. Thanks 🙏
@lukeotwell3296
@lukeotwell3296 2 роки тому
This is one of the best break downs of a hook I have seen, hope to see more like this.
@Kaiyes_
@Kaiyes_ 8 місяців тому
hands down the best teacher of React. I kid you not !!!
@onthecodeagain
@onthecodeagain Рік тому
Every react dev should watch this video. You explain concepts so clearly and at such a good pace! All your content is so good man!
@bishalpandit4464
@bishalpandit4464 2 роки тому
This video literally cleared up a lot of confusions. Really grateful. This video is a gem 💎
@habtamudesalegn5397
@habtamudesalegn5397 2 роки тому
very clear and an in depth uses of some of react hooks, thanks Mr. Jack as a usual!
@ExistentialCuriosity
@ExistentialCuriosity Рік тому
This is the best piece of content on useEffect I have seen so far. It's so clear conceptually and pratically on point. I legit feel more confident using useEffect now, I get it!! Thank you Jack!
@apresthus87
@apresthus87 2 роки тому
This is easily one of the best code related (at least when it comes to React) videos I have ever watched. I thought I had a pretty good idea about how useEffect worked, but I learned a lot from this and deepened my understanding. I'm sure there are optimisations I can do in my codebase now armed with this knowledge :)
@kavinduchamith8005
@kavinduchamith8005 7 місяців тому
This content is gold. 💯
@lukas.webdev
@lukas.webdev 7 місяців тому
I agree! 😉
@amwebexpert
@amwebexpert 2 роки тому
I'm a big fan of all your tutorials about React, you are an excellent teacher! If you're interested I (and the community I'm sure) would appreciate to have a dedicated video on useRef fundamentals, behavior and use cases!
@michaelbacy3525
@michaelbacy3525 2 роки тому
The way you explain these topics is amazing
@arkadyvinkovsky5879
@arkadyvinkovsky5879 Рік тому
Best explanation of useEffect I have ever seen. Thanks so much!
@raymondmichael4987
@raymondmichael4987 2 роки тому
That last part, using state as dependence I didn't know that. This video is packed with lot of very important lessons. Thanks buddy. Greetings from Tanzania 🇹🇿
@wandersonsousa1891
@wandersonsousa1891 Рік тому
The stopwatch example was mind blowing, thank you, for the good work !
@smoothbeak
@smoothbeak 2 роки тому
Just discovered your channel now, and I'm very impressed with the lucidity of your explanations!
@joelalmeida5249
@joelalmeida5249 2 роки тому
Excellent video, excellent channel. The examples you bring are amazing and the way you explain the content, step by step, is really cool. Hello from Brazil!
@azmaniandevil
@azmaniandevil 2 роки тому
this is genuinely one of the best videos I've watched explain a seemingly complex concept. once broken down into the fundamentals, paired with straightforward examples (and gotchas!) - the complexity goes way down. thank you Jack! I was in the middle of a large refactor to reduce our eslint errors and the only one remaining is the useEffect dependancy array ones. this video definitely is going to help me tackle the more complicated ones from that.
@jherr
@jherr 2 роки тому
Fantastic! Thank you! And, of course, good luck!
@aarongillies2900
@aarongillies2900 2 роки тому
Fantastic explanation of a sometimes frustrating hook in React, definitely bookmarking this one!
@nairanvac79
@nairanvac79 2 роки тому
Thank you so much for this. I've been struggling with this for weeks!
@kirkir2297
@kirkir2297 Рік тому
Absolutely best explanation about how useEffect dependencies work! 🔥🔥🔥
@benaiah_al
@benaiah_al 2 роки тому
This is really cool. I once taught I knew all about useEffect, but watching this made me realize I never new nothing. Love how you broke it down. Keep it up
@mateuszrychlik4292
@mateuszrychlik4292 2 роки тому
Your videos actually helped me a few times at work. Hope you'll keep up uploading
@vibhor3049
@vibhor3049 2 роки тому
Amazing video, Jack! You're very knowledgeable and underrated. Keep creating!! 🔥
@jaysavlani8047
@jaysavlani8047 5 місяців тому
Best video on useEffect so far
@FeralWitchchild
@FeralWitchchild 2 роки тому
Jack, this is extremely well done, thank you for this!
@asagiai4965
@asagiai4965 8 місяців тому
Very nice and informative video. Also, encourage people to be not afraid of useEffect. But also promotes critical thinking.
@lukas.webdev
@lukas.webdev 8 місяців тому
I agree! 😉
@AZisk
@AZisk Рік тому
Jack, just found your channel today. Really great content 🎉 thanks for the crystal clear explanation that are built up like a gradual layering of knowledge and skill. This is how tutorials should be.
@adityakadam2256
@adityakadam2256 2 роки тому
Best indepth and easy to understand explaination. Thanks for sharing.
@LuisBlancoAustin
@LuisBlancoAustin 2 роки тому
What an awesome explanation of the react useEffect hook. Many thanks!
@itsaaron6423
@itsaaron6423 Рік тому
Am going to tear all my hair out working with this useEffect .😱
@DarkFlarePrince
@DarkFlarePrince Рік тому
Best channel I've found so far!! Thank you so much!!
@vikashnagar2114
@vikashnagar2114 10 місяців тому
really help a lot! This is most deep dive video , I ever seen in coding journey
@AnupDhakalSharma
@AnupDhakalSharma 2 роки тому
The title and thumbnail are opposite of click bait. I almost didn't click it thinking I'm gonna get the same basics, aren't I? Boy was I so wrong I am glad that I clicked it.
@drewbird87
@drewbird87 2 роки тому
Incredibly valuable again Jack. Thank you 🙏
@muratasarslan2359
@muratasarslan2359 2 роки тому
Thank you for your valuable effort Jack 👏
@tomasvancoillie
@tomasvancoillie 2 роки тому
Great explanation about useEffect. It is a hook with some complexity. Just last week had an example in a pretty large useEffect to programmatically set some form fields based on other filled in fields. In the useEffect, we needed a value to compare to other fields. But had the problem at first that the value kept triggering the useEffect hook undesirably. When creating a reference to that value, the useEffect hook wouldn't trigger when we used that value inside the hook. Learned a lot ;)
@moiseslagos8979
@moiseslagos8979 2 роки тому
Eres un Genio Jack, sigue ilustrándonos. Good job
@onticmix
@onticmix Рік тому
Your content is amazing as always! Thanks for doing what you do!
@rboy879
@rboy879 2 роки тому
Woow blown away but the explanation, use case etc. Keep up the good work!!!
@hikarukun5126
@hikarukun5126 Рік тому
I am glad that I discovered this channel, thanks a lot Sir for your passion to educate people and making our community better
@sagarreddy7461
@sagarreddy7461 2 роки тому
Awesome jack. Got clear idea of useEffect now. Thanks.
@zzzzzzzzdsadasd
@zzzzzzzzdsadasd 2 роки тому
at 18:00 you used useLayoutEffect, why? It seems redundant, not performant and adds code complexity for no reason. Any reason for not just doing the following? const savedOnSuccess = useRef(options.onSuccess); savedOnSuccess.current = options.onSuccess;
@jherr
@jherr 2 роки тому
You are correct, I didn't need to do that.
@gabrielfono844
@gabrielfono844 Рік тому
damn I have been working as full stack engineer for 7 months now but I swear I have to watch this video three times to fully understand . this is one or if not the most underrated videos on youtube on useEffect . I trully understand how this things work. some people think they understand pass by reference but most developers dont understand these concepts. I will share this video for sure. I spent this weekend to go over his videos on useLayout, useCallback ,useRef and so on. thanks a lot.
@collenzaligway4458
@collenzaligway4458 2 роки тому
Really helpful Man, I appreciate your videos that has quality content and eloquent explaination of process. Thank you so much.
@teerapatprommarak2070
@teerapatprommarak2070 2 роки тому
Great explained, thank you Jack!
@julian_pp
@julian_pp 2 роки тому
A season mastering for all hooks please! Thank you for this vid! Much appreciatted
@rashidaz1582
@rashidaz1582 Рік тому
Thank you Jack! Amazing explanation
@DarkShadow00972
@DarkShadow00972 Рік тому
Thought about skipping this video came to know much is yet to explore what a gem thanks jack
@vibhassingh619
@vibhassingh619 2 роки тому
Wow this tutorial is awesome. This is a very deep explanation. Worth watching it. 😍
@zerocodercool
@zerocodercool 2 роки тому
Grrrrrreat explanation, as always! Thanks Jack!
@mokorra
@mokorra Рік тому
Quality video as always Jack! Now I know I never understood useEffect dependency till I watched this video
@johnelbasha8967
@johnelbasha8967 7 місяців тому
The part of the video between 3:51 and 5:20 explains very well the render and re-render lifecycle. I urge anyone who is still a bit nervous about useEffect to watch and rewatch this section til it sticks. I had to draw a diagram to explain to myself what was happening at each step. Also, if you're using console.log within the useEffect hook, don't forget to make sure that there isn't a React.StrictMode component within the index.js file.
@elmoutaouakkilmohammed1432
@elmoutaouakkilmohammed1432 Рік тому
Amazing! Watching this video is like watching a great movie multiple times, and it just gets exciting and fun every time you watch it! Thank you, Jack!
@pranavkochhar9352
@pranavkochhar9352 2 роки тому
Very informative and well explained video. Thank you so much
@SushilKumar-ig8ls
@SushilKumar-ig8ls 2 роки тому
Thank you for such great insights and tricks. Lot of respect and a BIG THANK YOU.
@tiagodroppa
@tiagodroppa 2 роки тому
So much value in one video!
@NinjacookieVG
@NinjacookieVG 2 роки тому
This is just what I needed, thanks a ton!
@jonathanzevi2425
@jonathanzevi2425 2 роки тому
Superb tutorial! I wish I found you sooner.
@shubhamlatiyan7972
@shubhamlatiyan7972 2 роки тому
Always been a fan of your tutorials
@javaforliving
@javaforliving Рік тому
Excellent video as usual, Jack !
@JoonhwanLee
@JoonhwanLee 2 роки тому
You ARE good story teller!! Thanks ❤️
@cristinavlassov3006
@cristinavlassov3006 Рік тому
I had a bug in my user profile's form, but when I found this I knew the solution was here. I watched it carefuly and found the solution. Great video!
@MuhammadAhmed-pd8zu
@MuhammadAhmed-pd8zu Рік тому
You are beyond amazing! Thank you so much for this tutorial!
@shashikaxp1
@shashikaxp1 2 роки тому
Now we are talking, thanks Jack. loved this. we need some advanced stuff on react :)
@Irfan-vl6ij
@Irfan-vl6ij Рік тому
Best Video to learn about useEffect
@user-fg6ng7ej6w
@user-fg6ng7ej6w 4 місяці тому
thanks. very informative video with many useful densely packed topics.
@alexanderm6187
@alexanderm6187 Рік тому
Jack, thank you! That's the absolutely perfect lesson! :)
@ontheruntonowhere
@ontheruntonowhere Рік тому
Great content, Jack. I'm a PHP dev who's getting into React, and I've started binging your channel. I don't mean this as criticism, just giving some feedback on a couple of things which made the video somewhat difficult to follow. I realize this video was released a while ago so apologies if these points have already been addressed. First, is it possible to turn off hinting in VS Code? The popups while you're typing are distracting, and obscure your work. In the same vein, it would be easier to follow if your headshot wasn't obscuring the code, perhaps by being smaller or hidden altogether when you're not talking directly to the camera. Thanks for providing these tutorials. As a vlogger I recognize how much work goes into making them.
@imarenny
@imarenny 2 роки тому
Thank you so much for the video! Very Useful! :)
@Raubritterr222
@Raubritterr222 2 роки тому
Jack, can you please make a video on how to set up VSCode for React development? You are an excellent expert in both!
@diaael-din8832
@diaael-din8832 Рік тому
okay i must admit that, u r amazing, i hv been coding for almost a year now (not much i know) but built few apps alrdy, but once i saw ur video i knew i'm missing few things and also did some mistakes with these apps, and gotta say also ur teaching is awesome, hope u and ur channel best of luck, ty
@noormuhammad888
@noormuhammad888 Рік тому
Gold mine of knowledge thats even for free... ! Highly appreciated sir
@habibiSD
@habibiSD Рік тому
Amazing job so many light bulbs went off after watching this turtotial.
@aestheticallyamazing2003
@aestheticallyamazing2003 2 роки тому
Thank you for this, i learned a lot 💙
@jaimearriola1495
@jaimearriola1495 2 роки тому
Why I didn't know about this channel before? ... I mean you're an awesome instructor!! I enjoyed this video so much and I learned a lot!! Thanks so much for this great content, you just got a new suscriber! 🥳
@abdulazeez.98
@abdulazeez.98 Рік тому
Awesome video! finally a video that covers them well.
@ElderESG
@ElderESG 2 роки тому
As always, amazing content
@echobucket
@echobucket Рік тому
One thing that's helpful when thinking about useEffect is that it's like a callback.. and it's gonna get called by react AFTER the component function ENDs.
@KevinOfSteel
@KevinOfSteel 2 роки тому
Great informative video! I didn't forget to subscribe this time. Thank you!
@yogi2983
@yogi2983 Рік тому
I've seen seasoned developers make the mistakes you've shown in the video. Thanks a million for this! I'm a big fan
@bythealphabet
@bythealphabet 2 роки тому
Excellent Video Jack thanks.
@nabloler
@nabloler 2 роки тому
Jack. I love you! That was great and really helpful!
@rahilansari261
@rahilansari261 Рік тому
This is amazing 🤩🤩 Thanks Jack 🙏🏼
@beders
@beders 2 роки тому
I'm so happy I'm using reagent which has absolutely none of these problems
@philippec4448
@philippec4448 Рік тому
I love how knowledgeable you are in React and state management and how you make complex stuff easy to understand. I wish you had a comprehensive React course. I would have definitely bought it in the blink of an eye.
@jherr
@jherr Рік тому
I have a react and typescript playlist for free which is pretty comprehensive.
@anandv1391
@anandv1391 10 місяців тому
​@@jherrwhere man I want to buy
@vorche_
@vorche_ Рік тому
Loved the video thank you!
@tomino133
@tomino133 2 роки тому
Excellent video Jack.
@subliminakeys1674
@subliminakeys1674 Рік тому
First of all. I love your videos, your teaching is very straight forward and thorough. Second, what is that font you are using? It's wild, but I feel like I would love it
@jherr
@jherr Рік тому
JETBrains Mono or Operator Mono, depends on the video
@tubagusputra5788
@tubagusputra5788 Рік тому
It's great explanation, sir :)
@matthew1106
@matthew1106 2 роки тому
You're the man Jack!
@user-ow1ji4le4k
@user-ow1ji4le4k 2 роки тому
Thanks for the great content.
@humblepeanut
@humblepeanut 2 роки тому
Great content as always.
@anders671
@anders671 Рік тому
Excellent material!
@ivaniltonbezerradasilva6954
@ivaniltonbezerradasilva6954 2 роки тому
Awesome video. It helped me a lot 🤓
@anandv1391
@anandv1391 10 місяців тому
Bro u r such a great teacher..do more like this..deep analysis and getting sorting outing new things in a small small tricks it's cool..❤❤❤ love u..need more on react js jack
@mubarakjamal9642
@mubarakjamal9642 2 роки тому
Nothing else I can say, a simple word is enough to let us understand, Love the way you explain
@wimdenherder
@wimdenherder Рік тому
Incredible quality tutorial, thanks! Quick question: how do you move cursor from end quotation mark to beginning quotation mark with shortkey? at 22:58
Mastering React Memo
26:56
Jack Herrington
Переглядів 130 тис.
You might not need useEffect() ...
21:45
Academind
Переглядів 115 тис.
Nonomen funny video😂😂😂 #magic
00:29
Nonomen ノノメン
Переглядів 46 млн
Five React App Killing Anti-Patterns 🪦😱
12:47
Jack Herrington
Переглядів 29 тис.
You Are Using useEffect Wrong
14:40
Cosden Solutions
Переглядів 26 тис.
This Will Make Everyone Understand Golang Interfaces
21:03
Anthony GG
Переглядів 36 тис.
This is the Only Right Way to Write React clean-code - SOLID
18:23
CoderOne
Переглядів 608 тис.
React 18's New State Hook You've Never Heard About
22:11
Jack Herrington
Переглядів 87 тис.
Mastering React Hooks with Typescript
55:12
Jack Herrington
Переглядів 99 тис.
Goodbye, useEffect - David Khourshid
29:59
BeJS
Переглядів 490 тис.
Common React Mistakes: useEffect - Part 2
20:44
Jack Herrington
Переглядів 25 тис.
Why Signals Are Better Than React Hooks
16:30
Web Dev Simplified
Переглядів 435 тис.
SELPHY celebrates 20th Anniversary"Birthday"(Canon Official)
0:31
Canon Imaging Plaza
Переглядів 127 тис.
If you do wire soldering with paste, soldering can be done very easily
0:26
Tech Electronics BD
Переглядів 2,2 млн
Новая Insta360 X4 - Как снимать ВИРУСНЫЕ видео
10:07
Человек с Земли
Переглядів 30 тис.
Опасная флешка 🤯
0:22
FATA MORGANA
Переглядів 74 тис.
Why spend $10.000 on a flashlight when these are $200🗿
0:12
NIGHTOPERATOR
Переглядів 15 млн