All useEffect Mistakes Every Junior React Developer Makes

Поделиться
HTML-код
  • Опубликовано: 17 дек 2024

Комментарии • 601

  • @sergeylukin8740
    @sergeylukin8740 2 года назад +731

    I work professionally with React for more than 5 years and still regularly fall into these traps. Understanding these concepts is essential, and this video explains them perfectly. If RUclips would allow, I would like this video 10 times!

    • @artmax1998
      @artmax1998 2 года назад +5

      Продолжай работать в том же духе с 0-ми познаниями в JS, это прекрасно

    • @vapeurdepisse
      @vapeurdepisse 2 года назад +5

      Weird because after 2 months I don't???

    • @bokyunggg
      @bokyunggg 2 года назад

      Really cool😊

    • @Investigamer
      @Investigamer 2 года назад

      @@vapeurdepisse Congratulations, you can pick up your trophy at the corner of who gives an F parkway and totally pointless flex avenue.

    • @theway_up
      @theway_up 2 года назад

      @@artmax1998 О здарова, американский ютуб знает толк

  • @johnbaquerocelis8148
    @johnbaquerocelis8148 2 года назад +60

    Great explainable video, thank you!
    Only a sneak peek about Axios. Since v0.22.0 we can use the AbortController passing the signal as an option rather than CancelToken as it is deprecated in new versions.

  • @ramiov3862
    @ramiov3862 2 года назад +248

    I've realy never seen any one who explains React hooks so well and all it's possible uses as well as what mistakes to avoid,
    This kind of knowledge is really what we are missing as junior developers, And i realy appreciate the effort man Thanks !

    • @kynshra8960
      @kynshra8960 2 года назад +4

      Would you say that only juniors watch these types of videos?

    • @ionitaa
      @ionitaa 2 года назад

      All the juniors in my team know by heart the count and setTimeout example because it's a common interview question. But when you ask them to demo global state they gg. One guy just left the interview...

    • @GagandeepSingh1984
      @GagandeepSingh1984 2 года назад +1

      @@kynshra8960 ya that was a catch

    • @vapeurdepisse
      @vapeurdepisse 2 года назад

      @@ionitaa you interview people that are already on your team?

    • @ionitaa
      @ionitaa 2 года назад

      ​@@vapeurdepisse What? At the tech interview, 2 of the codepens we give candidates for junior positions are:
      1. The useState and setTimeout question. Most people get it right.
      2. A quick demo on how to share state acros a component tree. Most people give up or just give bad solutions to this.
      You don't have to get all code pens right to get hired...

  • @yoJuicy
    @yoJuicy 2 года назад +56

    Very good explanation. useEffect is always intimidating! Keep doing the intermediate level help videos!

    • @Isaac-eh6uu
      @Isaac-eh6uu 2 года назад

      What do you mean by intermediate isn't useEffect one of the basic react hooks?

    • @feritperliare2890
      @feritperliare2890 2 года назад +3

      @@Isaac-eh6uu yes but to use react in a way that won’t burn a user’s computer you must use convoluted tricks for the hope that you render only 300 times

    • @CapeSkill
      @CapeSkill 2 года назад +4

      @@Isaac-eh6uu I wouldnt call useEffect a basic hook. Its the hardest hook for people to understand.

    • @justnaika
      @justnaika 2 года назад +1

      @@Isaac-eh6uu I watched at least 5 tutorials about use effect , still cannot wrap my head around it. So, yes , I would
      call it basic

    • @justnaika
      @justnaika 2 года назад +1

      wanted to say. " I wouldn't"

  • @sahil-ld1bu
    @sahil-ld1bu Год назад +2

    Every react developer on youtube create a value for us but there is some especially who totally change the way how to actually works in React You're the one of them Thanks and great. honestly, i don't know about your channel but i just on the recommendation of youtube. complete the 2 min i just realise oo my god what a man and his concepts

  • @it-series-music
    @it-series-music 2 года назад +18

    I wish I had found this tutorial earlier. You have explained all the details of one of the most important hooks in a really intuitive manner ! Great work :)

  • @Corntrop
    @Corntrop 2 года назад +3

    For the first time I understood useEffect clean up. As always lama dev simplified everything. Thank you so much

  • @zararashraf
    @zararashraf Год назад +1

    Beautifully explained. This will be my go-to channel now.

  • @mykalesalad
    @mykalesalad Год назад +6

    This is by far the most helpful react video I've ever seen, cleared up a ton of questions I had about strict mode and effect hooks

  • @Kiakayemen
    @Kiakayemen Год назад +1

    the most helpful video on useEffect !!! Well Done!!!👍👍👍👍

  • @TesfaTesfaye-z6j
    @TesfaTesfaye-z6j Год назад +1

    Been working with react for a while now and you just demystified a lot

  • @coder5336
    @coder5336 2 года назад +1

    Omg. You are the best man. Cleanest explanation ever. We need every hook tutorial from you.

  • @morgan24TH
    @morgan24TH Год назад +1

    I practice from the thumbnail before even watching the video, and it worked, bro you've save me. Thanks buddy much love. God bless you.

  • @wittyhumour29
    @wittyhumour29 Год назад +1

    Top-notch presentation, with a clear explanation of the pitfalls when working with useEffect

  • @peacecoder
    @peacecoder 2 года назад +2

    as expected ur work is great man. we r waiting for useRef , useMemo in more detail

  • @arnoczkyzoltan6158
    @arnoczkyzoltan6158 Год назад

    Köszönöm szépen, a megfelelő tudást kaptam, pont annyira kifejtve, amennyire szükséges és tisztázódott a fejemben sok misztikum.

  • @abdullahbelkaid1684
    @abdullahbelkaid1684 2 года назад +6

    I really love your tutorial mate , keep going and i wish you best of luck ❤️ from Algeria 🇩🇿

  • @amirjafari7996
    @amirjafari7996 2 года назад +1

    It was a perfect description of the React hooks I have ever seen. Thank you so much!

  • @CamiloMorales-z5r
    @CamiloMorales-z5r Год назад +1

    I think this is the most effective explanation I've ever experienced!

  • @chizidotdev
    @chizidotdev 2 года назад +8

    Your method of explanations are second to none Lama Dev! Thank you so much…
    Suggestion for next tutorial… useReducer vs useState, I can’t seem to get enough explanations for them

  • @vinaypatil8009
    @vinaypatil8009 2 года назад +3

    Sir , you are great !!!!!!!
    Please continue this series 🙏❣️

  • @morphine496
    @morphine496 2 года назад +1

    I can't thank you enough! God knows how many times I fetched data with useEffect in a wrong way.

  • @Reel_InsightYT
    @Reel_InsightYT 2 года назад +1

    Sir, You are one of my favorite pedagogue... I always wait for your video

  • @leo-phiponacci
    @leo-phiponacci 2 года назад

    Very useful, I was searching for these frequently, and you have grouped it together in one video, thanks a lot!

  • @philipmwangi5270
    @philipmwangi5270 2 года назад +9

    Hey Lama Dev, Awesome video. Could you do one on useCallback and how they relate with useEffect or just how to minimize alot of rerenders on your application

  • @nitinravi8400
    @nitinravi8400 Год назад

    Beautiful! Thank you! Especially thanks for showing me how to write the clean up function. As well as the api clean up.

  • @omagadavid9923
    @omagadavid9923 Год назад

    I'm so happy I clicked on this video. I'm a beginner in react currently working on a project and I was at the verge of giving up before watching this. Thank you so much this video saved me😂

  • @zeeshanalikhan8258
    @zeeshanalikhan8258 2 года назад

    This was the best tutorial I ever found for useEffect, very thoroughly explained.

  • @junaifcp3662
    @junaifcp3662 2 года назад

    It's an amazing tutorial and I can find answers lots of questions the interviewer asked me regarding useEffect during interview

  • @mayukhchanda5805
    @mayukhchanda5805 2 года назад +12

    It's better to use a primitive in useEffect's dependency array. I'm a React developer and I've made this mistake by adding bulky objects in the dependency array which in turn leads to huge performance losses & really laggy UX. In my case, I had added an object I was receiving from an API which later I changed to only the status of the request.

    • @gshan994
      @gshan994 Год назад +1

      For me i was adding whole response array but it was going in an infinite loop . Due to reducers.
      Hence jus added a state flag when new replies were coming n toggled it in useeffecr

    • @qbek_san
      @qbek_san Год назад

      Sometimes, the whole point of component is to render complex data structure coming from backend, so "just always use primitives" ain't good advice imo

    • @BigJohnJordan
      @BigJohnJordan Год назад

      ​@@qbek_san4:39

  • @ky3ow
    @ky3ow 2 года назад

    your explanation on "subscribing to api" was very good, earlier i seen it in react docs and had no understanding what it meant, thanks

  • @karylchesman2475
    @karylchesman2475 2 года назад

    Dude, this is simply, the best video about useEffect that i have already seen in all of my life. Thank you so much!

  • @hemashah7031
    @hemashah7031 Год назад +1

    excellent professional video, v good learning, eye opener, thanks

  • @ashutoshpanda4336
    @ashutoshpanda4336 2 года назад +1

    I'm so grateful I clicked on the video... Never new about that cancellation of request

  • @amitchaudhari9618
    @amitchaudhari9618 Год назад

    For an experienced Backend Developer with some basic Front End knowledge, this just covered most of what I need to know in React to start out.

  • @abhisheksharma1031
    @abhisheksharma1031 Год назад

    This one is actually a deep dive into understanding useEffect hook. Amazing video

  • @farzeenzehra4892
    @farzeenzehra4892 2 года назад

    Great Video 💯
    This is my first time commenting on a RUclips video because this video really deserves it 😊
    Definitely going to watch other react videos.

  • @viniciusm.m.7822
    @viniciusm.m.7822 2 года назад +2

    Love you, man! Forte abraço do Brasil!!!
    God bless you!

  • @declaudefrancois
    @declaudefrancois 2 года назад

    This is probably the best useEffect explaination i've ever seen !

  • @dr.science9609
    @dr.science9609 2 года назад +10

    Another much needed video ❤️
    Fetch API vs separate folder for API calls( as we used in our Netflix project)

  • @maraaaaa10
    @maraaaaa10 2 года назад

    I have never heard a better explanation.
    Very clear, simple, many examples.
    Immediately subscribed to the channel

  • @rockfox5
    @rockfox5 2 года назад

    Oh wow. This is by far the best guide on useEffect. I have been working with react for well over a year now still gotcha when it comes to useEffect. This enhanced my understanding. Thank you.
    Maybe another guide on other React hooks?

  • @crowbr
    @crowbr 2 года назад

    For sure is the best explanation about UseEffect what I had seen. Congratz

  • @umdi3337
    @umdi3337 Год назад +1

    Most useful video I have watched about React.

  • @byronk5
    @byronk5 2 года назад

    This has answered many questions I had about this particular hook. Thanks so much for the great content!

  • @shobhit4935
    @shobhit4935 2 года назад

    you are so amazing....I just never seen an explanation so clean and easy to follow...thank you and keep up the good work

  • @cortaesai
    @cortaesai Год назад +2

    Após 1 ano de estudo só agora entendi com o não ter problemas com useEffect. O clean-up ajudou de mais
    Vlw @Lama Dev

  • @BSK_Rick
    @BSK_Rick 2 года назад

    Congrats from Brazil!
    Best explanation about react performing !

  • @kunaldhuria3935
    @kunaldhuria3935 Год назад

    Lama Dev you are a god sent human being for web dev, can't thank you enough.

  • @jesleycaceresmarcelino1812
    @jesleycaceresmarcelino1812 Год назад +1

    Amazing explanation, really clean and usefull. thank you

  • @juliosalas1010
    @juliosalas1010 2 года назад

    Flawless! This video deserves much more views man.

  • @dubaifatimaali
    @dubaifatimaali 2 года назад

    I am junior react developer still learning from Udemy and this was quiet needed. Thanks

  • @artogrulturkmen
    @artogrulturkmen 2 года назад

    I noticed and watched the video today, it was the great present for my birthday)) thanks a lot Lama dev

  • @rajatpatel1817
    @rajatpatel1817 Год назад +1

    This is some great quality contents. 👍🏻

  • @hamzafarhan348
    @hamzafarhan348 2 года назад

    Finally someone who care about understanding the details specially from the documentation

  • @OscarRuiz-ql3bt
    @OscarRuiz-ql3bt 2 года назад

    I think this is the best video explaining useEffect hook, you're awesome!

  • @iammdsameer
    @iammdsameer Год назад

    Wow! this content is so high quality. Definitely worth the time.

  • @JulianHarris
    @JulianHarris Год назад

    The best guide for useEffect I’ve watched so far. Super helpful!

  • @nobir98
    @nobir98 2 года назад

    Such a good explanation and example. I've never seen someone explain react hook that easily and it's use cases

  • @eestidev
    @eestidev Год назад

    One of the best explanations! Keep on doing!
    Only one thing is that useEffect is not lifecycle method anymore, it is synchronization method.

  • @robovirtuoso1354
    @robovirtuoso1354 4 месяца назад +4

    Hate it when "junior" developers are generalized. Even some pretentious senior developers make those mistakes. The only difference is that those senior developers are good at selling themselves as better than the juniors. 😆. Great video, btw, it's just the title that I had to point out.

  • @oliahmed609
    @oliahmed609 2 года назад

    Full video very informative. And useEffect in the api section is very much helpful. I was struggling with that finally that solved by you for me. Thanks man. Subscribed.

  • @badarmughal2297
    @badarmughal2297 2 года назад +2

    Amazing video i rarely comment on videos but it was an amazing video. thank you for this effort
    I hope you can also explain the following topics also
    1) Using a callback in the useeffect
    2) The problem faced in forms when the state is one render behind the text entered in the input field.

  • @SmartWizzard
    @SmartWizzard 2 года назад

    This is video is a life saver for anyone in productions keep it Lama :)

  • @voldemore6300
    @voldemore6300 2 года назад +1

    This is so informative, as a beginner I do respect what you done in this instruction!!🎉

  • @nav.r
    @nav.r 2 года назад

    🙏. your video is probably the only one that has a very beautiful explanation of useEffect. Thank you

  • @maxwelochieng7658
    @maxwelochieng7658 Год назад

    Friday's are for tutorials and Docs, combining these two helps you leverage on your coding skills. I fell in love with these useEffect best practices. Good video lad

  • @hwj8640
    @hwj8640 2 года назад

    At beginning of video I saw it renders twice, I was confused. And you explains it well at end of video.

  • @softmerit25
    @softmerit25 2 года назад

    You're really the best. A good teacher indeed. Your videos are clearly explained and hands on practice. Thanks a bunch for all you do. Bless you!!!

  • @mamapop
    @mamapop 2 года назад

    Such an amazing tutorial! thanks a lot!

  • @dealloc
    @dealloc 2 года назад +3

    You misspoke at 11:13 - the effect isn't called every render with an empty dependency list. Rather due to the hot module reloading (HMR) it remounts the component causing it to run the effect again. Rendering happens when you update state (either from props or internal state), remounts happen when the component is unmounted and mounted again from the outside, whether due to a condition and in this case, HMR.
    The cleanup function returned from useEffect handler is called when the component unmounts, or any of its dependencies change.

  • @meaningmean
    @meaningmean Год назад

    You explained really well, thanks for this refresher!

  • @shujathaliirfan2662
    @shujathaliirfan2662 2 года назад

    Wow it's just focusses on some core topics of react library and u have just explained us in a best way possible....

  • @Mauna25
    @Mauna25 2 года назад +1

    Amazingly easy to comprehend! Good examples and explanation :)

  • @harshhandoo1971
    @harshhandoo1971 2 года назад

    this is so far the best react tutorial. Kudos

  • @antonioquintero-felizzola5334
    @antonioquintero-felizzola5334 2 года назад

    This one of the best usseEffect explanations I've seen. Thank you Lama Dev 🙏🏻

  • @SankalpSachan-ky5ic
    @SankalpSachan-ky5ic Год назад

    This video is just a precious 22mins in my career growth, these kind of detailed information just increases my confidence and thankyou for you to for creating such a great content 🔥

  • @rishabhunlocked2693
    @rishabhunlocked2693 2 года назад

    loved this explanation man.. loads of love for your efforts

  • @StarCourtesan
    @StarCourtesan 2 года назад

    I want moreeee!! If this was for beginners I'm curious what I'd learn for advanced developers because I learnt so much from this!

  • @chasesim8638
    @chasesim8638 2 года назад

    This video was so helpful to know how to use useEffect properly for the person who just started learning React like me!! Thanks man

  • @mohdsahil226
    @mohdsahil226 2 года назад

    Thank you! Please add more videos for professional React code and best practices! Even if you charge, I am ready to pay!

  • @williamch3n
    @williamch3n 2 года назад

    Thank you Lama Dev, very helpful and enlightening video!

  • @refeez3700
    @refeez3700 Год назад

    Nice tutorial! Thank you very much! As a beginner React dev it clarified a few things for me! Keep it up mate! :)

  • @sunilpanwar2231
    @sunilpanwar2231 2 года назад

    so many thing i learned it in 5 min...like abortcontroller ,cancel request,strictmode... thanx a lot..

  • @xacxdcx
    @xacxdcx 2 года назад

    Man you're so good at explaining these concepts, thanks! You're videos are always great!

  • @garikmelqonyan9130
    @garikmelqonyan9130 2 года назад

    Thanks a lot, Safak. This was a great help to understand, some of the weird parts of useEffect.

  • @girijashankarj
    @girijashankarj Год назад +1

    I really appreciate the use cases examples

  • @sonvu7896
    @sonvu7896 2 года назад

    this is amazing, very detail explaination on how useEffect works!, you deserve more viewer and subscriber

  • @luishenriqueandradepellizz680
    @luishenriqueandradepellizz680 2 года назад

    Been learning react the past 5 months and never understand about the return option o the useEffect. And that is because all tutorials are about functional components, and we don’t see the componentUmount and didMount like the classes anymore. But this video opened my mind

  • @luizarnoldchavezburgos3638
    @luizarnoldchavezburgos3638 2 года назад

    amazing!!!! keep doing videos like that. Today i used you video for developing and it was useful. Please keep doing it. Good Job.

  • @Frank2tek
    @Frank2tek Год назад +1

    Best useEffect tutorial ever 👍

  • @ammaralhomyqani9079
    @ammaralhomyqani9079 Год назад +1

    Thank you so much bro, this video very very very helpful

  • @loganj6203
    @loganj6203 2 года назад

    The subscriber is that I never know. Thank you so much!!

  • @aaron7c
    @aaron7c 2 года назад

    Wow that was super informative! Thanks for clearing that up :)

  • @mdsolayman9558
    @mdsolayman9558 2 года назад

    Thank you for this masterpiece. Please Keep posting such topic that will take a beginner to intermediate

  • @hammadiazaiez9337
    @hammadiazaiez9337 2 года назад

    thank God I'm lucky enough to explore your channel
    thank you so much for your great explanation and the good examples ❤️

  • @ionut2671
    @ionut2671 2 года назад

    Hello from Roumania. My real job is Krya Yoga and I start coding 6 months ago,only as a hobby,I watch a lot of your videos and I like your easy way to explain.May Shiva(my Lord),bless you with long life and prosperity.Om namah Shivaya

  • @oerbyy
    @oerbyy Год назад +1

    Such a great guide! Thanks 8)

  • @justinjoker8060
    @justinjoker8060 2 года назад

    many thanks! you changed my development completely

  • @rutvikdeshmukh6274
    @rutvikdeshmukh6274 2 года назад

    truly really well explained.
    i Never used clean up function in useEffects and was totally unawares About it consequences, from now on will definately use it. even how good advantages it provides in api calling and also in other's thing's, truly well learned from your video, strick mode why we should use, you explained very well.