KZhead
Ғылым және технология

Mastering React's useEffect

Jack Herrington
2024 ж. 3 Мам.
169 136 Рет қаралды
Жүктеу

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

Пікірлер

  • 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.

    @joonkim9302@joonkim93022 жыл бұрын

    • Wow, thanks!

      @jherr@jherr2 жыл бұрын

    • Joon I see your 3 watch attempts and raise you two.

      @ToddDunning@ToddDunning2 жыл бұрын

    • @@jherr Thanks for code included!

      @zmrzlinazmrzlina2094@zmrzlinazmrzlina2094 Жыл бұрын

    • 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.

      @yawn74@yawn7415 күн бұрын

  • 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.

    @Crevulus@Crevulus2 жыл бұрын

    • 100% agree

      @jaymarley6172@jaymarley61722 жыл бұрын

    • I had the exact same thought haha. He explains the concepts so well.

      @dragonslayerofhell1@dragonslayerofhell12 жыл бұрын

    • He is expert

      @aimanyounis8387@aimanyounis83872 жыл бұрын

  • Kudos to KZhead 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!!

    @sayantanmanna1360@sayantanmanna1360 Жыл бұрын

  • hands down the best teacher of React. I kid you not !!!

    @Kaiyes_@Kaiyes_9 ай бұрын

  • The useCallbackRef pattern is EXACTLY what I was missing in my mental puzzle to properly memoize passed functions. Thanks 🙏

    @OleksandrDanylchenko2k@OleksandrDanylchenko2k Жыл бұрын

  • This is one of the best break downs of a hook I have seen, hope to see more like this.

    @lukeotwell3296@lukeotwell32962 жыл бұрын

  • This video literally cleared up a lot of confusions. Really grateful. This video is a gem 💎

    @bishalpandit4464@bishalpandit44642 жыл бұрын

  • very clear and an in depth uses of some of react hooks, thanks Mr. Jack as a usual!

    @habtamudesalegn5397@habtamudesalegn53972 жыл бұрын

  • So amazing that you explain all aspects of a feature deep and complete like this

    @miladmohammadi3233@miladmohammadi3233 Жыл бұрын

  • 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 :)

    @apresthus87@apresthus872 жыл бұрын

  • 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!

    @ExistentialCuriosity@ExistentialCuriosity Жыл бұрын

  • Fantastic explanation of a sometimes frustrating hook in React, definitely bookmarking this one!

    @aarongillies2900@aarongillies29002 жыл бұрын

  • Thank you so much for this. I've been struggling with this for weeks!

    @nairanvac79@nairanvac792 жыл бұрын

  • Just discovered your channel now, and I'm very impressed with the lucidity of your explanations!

    @smoothbeak@smoothbeak2 жыл бұрын

  • 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

    @benaiah_al@benaiah_al2 жыл бұрын

  • 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!

    @onthecodeagain@onthecodeagain Жыл бұрын

  • 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 🇹🇿

    @raymondmichael4987@raymondmichael49872 жыл бұрын

  • The way you explain these topics is amazing

    @michaelbacy3525@michaelbacy35252 жыл бұрын

  • 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.

    @AZisk@AZisk Жыл бұрын

  • Your videos actually helped me a few times at work. Hope you'll keep up uploading

    @mateuszrychlik4292@mateuszrychlik42922 жыл бұрын

  • What an awesome explanation of the react useEffect hook. Many thanks!

    @LuisBlancoAustin@LuisBlancoAustin2 жыл бұрын

  • Jack, this is extremely well done, thank you for this!

    @FeralWitchchild@FeralWitchchild2 жыл бұрын

  • Best explanation of useEffect I have ever seen. Thanks so much!

    @arkadyvinkovsky5879@arkadyvinkovsky5879 Жыл бұрын

  • Absolutely best explanation about how useEffect dependencies work! 🔥🔥🔥

    @kirkir2297@kirkir2297 Жыл бұрын

  • really help a lot! This is most deep dive video , I ever seen in coding journey

    @vikashnagar2114@vikashnagar211410 ай бұрын

  • Awesome jack. Got clear idea of useEffect now. Thanks.

    @sagarreddy7461@sagarreddy74612 жыл бұрын

  • 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!

    @joelalmeida5249@joelalmeida52492 жыл бұрын

  • 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 ;)

    @tomasvancoillie@tomasvancoillie2 жыл бұрын

  • 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!

    @amwebexpert@amwebexpert2 жыл бұрын

  • Best indepth and easy to understand explaination. Thanks for sharing.

    @adityakadam2256@adityakadam22562 жыл бұрын

  • I am glad that I discovered this channel, thanks a lot Sir for your passion to educate people and making our community better

    @hikarukun5126@hikarukun5126 Жыл бұрын

  • Incredibly valuable again Jack. Thank you 🙏

    @drewbird87@drewbird872 жыл бұрын

  • Woow blown away but the explanation, use case etc. Keep up the good work!!!

    @rboy879@rboy8792 жыл бұрын

  • Really helpful Man, I appreciate your videos that has quality content and eloquent explaination of process. Thank you so much.

    @collenzaligway4458@collenzaligway44582 жыл бұрын

  • 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!

    @elmoutaouakkilmohammed1432@elmoutaouakkilmohammed1432 Жыл бұрын

  • Amazing video, Jack! You're very knowledgeable and underrated. Keep creating!! 🔥

    @vibhor3049@vibhor30492 жыл бұрын

  • Thank you for your valuable effort Jack 👏

    @muratasarslan2359@muratasarslan23592 жыл бұрын

  • Your content is amazing as always! Thanks for doing what you do!

    @onticmix@onticmix Жыл бұрын

  • Best channel I've found so far!! Thank you so much!!

    @DarkFlarePrince@DarkFlarePrince Жыл бұрын

  • Best video on useEffect so far

    @jaysavlani8047@jaysavlani80475 ай бұрын

  • Thank you for such great insights and tricks. Lot of respect and a BIG THANK YOU.

    @SushilKumar-ig8ls@SushilKumar-ig8ls2 жыл бұрын

  • A season mastering for all hooks please! Thank you for this vid! Much appreciatted

    @julian_pp@julian_pp2 жыл бұрын

  • Great explained, thank you Jack!

    @teerapatprommarak2070@teerapatprommarak20702 жыл бұрын

  • Quality video as always Jack! Now I know I never understood useEffect dependency till I watched this video

    @mokorra@mokorra Жыл бұрын

  • Am going to tear all my hair out working with this useEffect .😱

    @itsaaron6423@itsaaron6423 Жыл бұрын

  • So much value in one video!

    @tiagodroppa@tiagodroppa2 жыл бұрын

  • Eres un Genio Jack, sigue ilustrándonos. Good job

    @moiseslagos8979@moiseslagos89792 жыл бұрын

  • Thank you Jack! Amazing explanation

    @rashidaz1582@rashidaz1582 Жыл бұрын

  • Grrrrrreat explanation, as always! Thanks Jack!

    @zerocodercool@zerocodercool2 жыл бұрын

  • Wow this tutorial is awesome. This is a very deep explanation. Worth watching it. 😍

    @vibhassingh619@vibhassingh6192 жыл бұрын

  • Excellent video as usual, Jack !

    @javaforliving@javaforliving Жыл бұрын

  • 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.

    @azmaniandevil@azmaniandevil2 жыл бұрын

    • Fantastic! Thank you! And, of course, good luck!

      @jherr@jherr2 жыл бұрын

  • This is just what I needed, thanks a ton!

    @NinjacookieVG@NinjacookieVG2 жыл бұрын

  • Very informative and well explained video. Thank you so much

    @pranavkochhar9352@pranavkochhar93522 жыл бұрын

  • This is amazing 🤩🤩 Thanks Jack 🙏🏼

    @rahilansari261@rahilansari261 Жыл бұрын

  • Now we are talking, thanks Jack. loved this. we need some advanced stuff on react :)

    @shashikaxp1@shashikaxp12 жыл бұрын

  • Thank you for the video! I'd been having trouble on a project recently, but I realize now what I'd been doing wrong!

    @andreh.9300@andreh.93006 ай бұрын

  • 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!

    @cristinavlassov3006@cristinavlassov3006 Жыл бұрын

  • Excellent Video Jack thanks.

    @bythealphabet@bythealphabet2 жыл бұрын

  • You are beyond amazing! Thank you so much for this tutorial!

    @MuhammadAhmed-pd8zu@MuhammadAhmed-pd8zu Жыл бұрын

  • This content is gold. 💯

    @kavinduchamith8005@kavinduchamith80058 ай бұрын

    • I agree! 😉

      @lukas.webdev@lukas.webdev8 ай бұрын

  • Always been a fan of your tutorials

    @shubhamlatiyan7972@shubhamlatiyan79722 жыл бұрын

  • Awesome video! finally a video that covers them well.

    @abdulazeez.98@abdulazeez.98 Жыл бұрын

  • thanks. very informative video with many useful densely packed topics.

    @user-fg6ng7ej6w@user-fg6ng7ej6w4 ай бұрын

  • Thought about skipping this video came to know much is yet to explore what a gem thanks jack

    @DarkShadow00972@DarkShadow00972 Жыл бұрын

  • 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

    @diaael-din8832@diaael-din8832 Жыл бұрын

  • Excellent material!

    @anders671@anders6712 жыл бұрын

  • 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.

    @johnelbasha8967@johnelbasha89678 ай бұрын

  • Jack, thank you! That's the absolutely perfect lesson! :)

    @alexanderm6187@alexanderm6187 Жыл бұрын

  • As always, amazing content

    @ElderESG@ElderESG2 жыл бұрын

  • Thank you so much for the video! Very Useful! :)

    @imarenny@imarenny2 жыл бұрын

  • Loved the video thank you!

    @vorche_@vorche_ Жыл бұрын

  • Excellent video Jack.

    @tomino133@tomino1332 жыл бұрын

  • I've seen seasoned developers make the mistakes you've shown in the video. Thanks a million for this! I'm a big fan

    @yogi2983@yogi2983 Жыл бұрын

  • 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.

    @gabrielfono844@gabrielfono844 Жыл бұрын

  • Superb tutorial! I wish I found you sooner.

    @jonathanzevi2425@jonathanzevi24252 жыл бұрын

  • 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.

    @philippec4448@philippec4448 Жыл бұрын

    • I have a react and typescript playlist for free which is pretty comprehensive.

      @jherr@jherr Жыл бұрын

    • ​@@jherrwhere man I want to buy

      @anandv1391@anandv139110 ай бұрын

  • Great informative video! I didn't forget to subscribe this time. Thank you!

    @KevinOfSteel@KevinOfSteel2 жыл бұрын

  • Gold mine of knowledge thats even for free... ! Highly appreciated sir

    @noormuhammad888@noormuhammad888 Жыл бұрын

  • This is great. Thank you.

    @sambasallah351@sambasallah3512 жыл бұрын

  • You ARE good story teller!! Thanks ❤️

    @JoonhwanLee@JoonhwanLee2 жыл бұрын

  • Great content as always.

    @humblepeanut@humblepeanut2 жыл бұрын

  • Very nice and informative video. Also, encourage people to be not afraid of useEffect. But also promotes critical thinking.

    @asagiai4965@asagiai49658 ай бұрын

    • I agree! 😉

      @lukas.webdev@lukas.webdev8 ай бұрын

  • Thanks for the great content.

    @user-ow1ji4le4k@user-ow1ji4le4k2 жыл бұрын

  • Thank you for this, i learned a lot 💙

    @aestheticallyamazing2003@aestheticallyamazing20032 жыл бұрын

  • Really helpful Jack

    @tomascarignano5002@tomascarignano50022 жыл бұрын

  • 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! 🥳

    @jaimearriola1495@jaimearriola14952 жыл бұрын

  • Amazing video !

    @zCr3ative@zCr3ative2 жыл бұрын

  • You're the man Jack!

    @matthew1106@matthew11062 жыл бұрын

  • 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;

    @zzzzzzzzdsadasd@zzzzzzzzdsadasd2 жыл бұрын

    • You are correct, I didn't need to do that.

      @jherr@jherr2 жыл бұрын

  • Nice! Thanks!

    @maksym7279@maksym7279 Жыл бұрын

  • It's great explanation, sir :)

    @tubagusputra5788@tubagusputra5788 Жыл бұрын

  • Great video!

    @rafamuttoni@rafamuttoni2 жыл бұрын

  • Best Video to learn about useEffect

    @Irfan-vl6ij@Irfan-vl6ij Жыл бұрын

  • simply awesome

    @user-mr2ym9nd3e@user-mr2ym9nd3e Жыл бұрын

  • Amazing job so many light bulbs went off after watching this turtotial.

    @habibiSD@habibiSD Жыл бұрын

  • Jack, can you please make a video on how to set up VSCode for React development? You are an excellent expert in both!

    @Raubritterr222@Raubritterr2222 жыл бұрын

  • 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.

    @AnupDhakalSharma@AnupDhakalSharma2 жыл бұрын

  • Thank you sir very helpful

    @alimohammadi1517@alimohammadi15172 жыл бұрын

  • Jack. I love you! That was great and really helpful!

    @nabloler@nabloler2 жыл бұрын
KZhead