Learn React useReducer Hook with Examples

Поділитися
Вставка
  • Опубліковано 21 лис 2024

КОМЕНТАРІ • 280

  • @emilworken7635
    @emilworken7635 2 роки тому +118

    Probably one of the best explanations I've seen on React Hooks. What i particularly like is the structure of the video:
    1) Introducing the hook and it's use cases in short
    2) Explain alternative methods (useState) that are easy to use , although can be made better (useReducer)
    3) Start with an easy example and structure of Syntax
    4) Progress to more advanced example
    The pace is perfect and explanations are top-tier. Really liked how you built in a useRef example as well, as this is something that junior devs can have a similar feeling around when it comes to use it compared to e.g useState and handleChange for a specific input-field.
    10/10.

    • @shujin9027
      @shujin9027 Рік тому

      He forgot to say "use mobx" at the end

  • @a4yster
    @a4yster Рік тому +8

    Not sure why its easier to understand your way of explanation but it definitely is. Probably it's about voice - you are very calm and well paced. Like Neagoie is overly ecstatic, Schwarzmuller is explaining like he is a drill sergeant in the army, Fireship takes an entire 3.7 seconds to explain even the most complex topic. You, meanwhile, keep the consistent pace.

  • @nirmalshah9947
    @nirmalshah9947 2 роки тому +18

    There we go, there we fucking go. Was just wondering the other day when I watched the junior dev mistakes videos that I wish Lama would make one on useReducer and you read my mind!

  • @ramiov3862
    @ramiov3862 2 роки тому +49

    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 !

  • @MathaGaram
    @MathaGaram 2 роки тому +1

    There are lots of people who know the concepts very well, but very few can explain to the pin point. This guy is on of them.

  • @Lakmalniranga
    @Lakmalniranga 2 роки тому +14

    Usually, I'm so lazy to write a comment. But just wanted to mention how great your tutorials are! Even the react doc itself didn't explain the hooks this well.
    Please continue to create more and more great contet!
    Thank you!

  • @Abhisumant03
    @Abhisumant03 2 роки тому +1

    U said it and u did it .
    "If u have playlist u will definitely save this video there and yus i did ."
    One of the best video ever for usereducer hook ❤️❤️❤️❤️ thanks .
    Pls keep making such small videos by taking these important topics .

  • @ngouendgerard4114
    @ngouendgerard4114 Рік тому

    Thanks you Lama Dev, I use these hooks for months bit it still seems confuse to me, but when come to your tutorials and explanation. I got right what's happening and I'm very delighted. Thanks you for your so concern for us.
    It's amazing Dev Lama

  • @SushilKumar-ig8ls
    @SushilKumar-ig8ls 2 роки тому +11

    Such a simple explanation and great way to handle large states. LOVED IT ♥

  • @morphine496
    @morphine496 2 роки тому +1

    Daaamn, exactly what I was looking for, I have a job interview in 5 days and this is going to help me a lot with the app I have to create. Thanks for sharing this with us Lama.

  • @gamergently
    @gamergently Рік тому

    Man! This is the easiest to understand tutorial I have tried many times and read many articles. THank you!

  • @salahaldeenalshaikhkhalil6328

    I was trying to understand useRedusers hook, I couldnt understand it till I watched your video. THANKS.

  • @marvikfr
    @marvikfr 2 роки тому

    Hey Lama ! Big "Merci" from a french guy in France, for all your videos and explanations very clean !!

  • @digvijayyamagekar4300
    @digvijayyamagekar4300 Рік тому

    after watching 10 videos could not understand anything then luckily found this one
    the best and easy explantion for useReducer hook
    thank

  • @andrijadenic4586
    @andrijadenic4586 Рік тому

    I can't belive how awesome you are! Please keep teaching us in simple English as you do. Wish you all the best!

  • @nithish1742
    @nithish1742 Рік тому +1

    One of the best explanations I have ever seen

  • @jasonlu6405
    @jasonlu6405 2 роки тому +4

    This is so informative but easy to understand! Please make a series about Hooks and their use cases. Thanks in advance!

  • @davidmukalay3536
    @davidmukalay3536 2 роки тому

    One of the most useful React skill have learned so far

  • @Fer0710
    @Fer0710 Рік тому

    This is a great explanation on how to implement the userReducer hook

  • @mahmoodnazari1004
    @mahmoodnazari1004 Рік тому

    One of the best tutorial I've ever seen. Could you please make a video about using useReducer with a multi-step form.🙏

  • @rpesc7918
    @rpesc7918 2 роки тому +8

    I've steered clear of useReducer because I thought it was just to complex, but you just changed my mind. Very well written and explained 💯. Could you cover navigation & routing at some point. The react router can get crazy when having nested routes 🤔

  • @mehmetnadi8930
    @mehmetnadi8930 Рік тому

    please do not stop making awesome tutorials! laerned so much from you! thank you

  • @berrieberrie1555
    @berrieberrie1555 2 роки тому +1

    ahh really loves how you teach us, simple and touch the basic fundamentals of JS/React ^^ thank you sir

  • @alfathmuqoddas6986
    @alfathmuqoddas6986 Рік тому

    Your tutorial is always simple, concise, and easy to follow, thank you!

  • @luizarnoldchavezburgos3638
    @luizarnoldchavezburgos3638 2 роки тому +1

    Lama keep doing this serie of videos. I will support you, I have shared to my friends too. Thanks for the explanation.

  • @chamonmath7688
    @chamonmath7688 2 роки тому +2

    This is very helpful. It's one thing to explain it, but the way he shows visually where things go with his cursor how things are connected, and it goes from here to there. Even gives a little flow chart and uses an example that I'm used to seeing with useState and then shows it's similiarty on how it's done with useReducer and cleans up the code. All around Great stuff the video was short too. 👍

  • @Reel_InsightYT
    @Reel_InsightYT 2 роки тому +1

    Awesome Video...Always Wating for lama's tutorial

  • @harvard004
    @harvard004 7 місяців тому

    This it the best useReducer tutorial on the web.

  • @ToumaRenshi
    @ToumaRenshi 2 роки тому

    I don't know how else to comment here. This is the most understandable and very explained how to use useReducer for beginners. I watched a few videos, but this material is a golden shot. Greeting from Poland. :)

  • @testingaccount5867
    @testingaccount5867 2 роки тому

    i felt like you even touched me the context api and redux which i had a hard time learning it for months.

  • @annetantanella5913
    @annetantanella5913 Місяць тому

    This is really nice and easy to understand. I like your illustration!

  • @estebansalazar5194
    @estebansalazar5194 2 роки тому

    grats bro, your explanation was so well. I just started to work in my job with context accompanied by useReducer and typescript and i had been so confused principally because i hadn't had experience with this hook so far. But this video lit me up like the morning lights. Thanks so much i appreciate your effort doing this kind of videos :)

  • @alexandrsachishin962
    @alexandrsachishin962 2 роки тому +2

    thats nice, thanks you so much! I would like to add two tips:
    1) we can create actions and action creators like in redux to handle different action types
    2) we can create general action type for increasing and decreasing count because the difference here is only in the number (positive or negative)

  • @ShubhamSingh-gk8vp
    @ShubhamSingh-gk8vp 2 роки тому +2

    Omg i was just learning useReducer ! Awesome video !!!!!

  • @wahidsakib
    @wahidsakib 2 роки тому

    I was struggling with useReducer, Oh man! You saved me.

  • @rafiqulislamtusher8605
    @rafiqulislamtusher8605 2 роки тому +1

    I really loved your explanation, Please make a video on useReducer vs Redux Toolkit. When we need to use useReduce and when we need to use Redux.

    • @Nightflash28
      @Nightflash28 Рік тому

      useReduce works within one component, redux works across your entire application. So if you need to manage state inside a single component, useReduce or even useState will do the trick. Do you need to manage the same state across multiple components at different levels of depth without worrying about props: redux.

  • @jonaskromwell4464
    @jonaskromwell4464 Рік тому

    Thank you for the explanation. I find this surprisingly familiar. I have structured many of my functions in just this way without ever realizing useReducer's function. I often use enums to enforce types and nrver have to worry with passing strings or misspelled parameters. I don't see as much use for useReducer as I had expected. Thank you for the clarity.

  • @SohailKhan-tc8uz
    @SohailKhan-tc8uz 2 роки тому +3

    I like your tutorials. Can you make a complete beginners tutorial for React Js.

  • @osho4609
    @osho4609 Рік тому

    No words for the knowledge man!

  • @codingandEnglishlearning
    @codingandEnglishlearning Рік тому +1

    I like the way he explained everything about useReducer hook 🪝 in detail. I found the resources very helpful after a series of searches on UA-cam. Much much better explanation. Thanks for sharing valuable information. 😀

  • @karthikraju6225
    @karthikraju6225 2 роки тому +1

    This is such an amazing series about React hooks. Will be using this a lot for reference. Thank you so much!!!

  • @DTUSEM
    @DTUSEM 2 роки тому +1

    This series must continue forever.🙂

  • @zillboy
    @zillboy 2 роки тому

    Dear Mr.Lama Dev,
    Keep these videos coming, this helps improve us going from junior to senior dev. :)

  • @alainrakotoarivelo7651
    @alainrakotoarivelo7651 Рік тому

    Thank you for sharing this tutorial about useReducer ❤

  • @discoveryspecial903
    @discoveryspecial903 2 роки тому

    Thanks, Lama Dev for posting the video on useReducer(), is very useful to us! Easy & Understood!

  • @gustavomanca
    @gustavomanca 2 роки тому

    This is one of the best explanations I've ever seen 🙌

  • @georgesword2012
    @georgesword2012 Рік тому

    Thanks ❤
    One of the best tutorials about useReducer hook ❤️

  • @FoodBitesTV
    @FoodBitesTV 2 роки тому

    This tutorial is really great! I appreciate the extra effort showing process diagram and explanation on each parameters&arguments which actually help to better understand. thanks a lot

  • @nageshwararaov118
    @nageshwararaov118 2 роки тому

    You are really helping us a lot with these tutorials, keep continuing..

  • @francescoPace27
    @francescoPace27 Рік тому

    You are such a great teacher!
    Thank you very much for your work and keep going!

  • @CodeWith-Lee
    @CodeWith-Lee Рік тому

    Yeah this is the video I was looking to watch for this topic. Thank You ..

  • @bhavyakothari9667
    @bhavyakothari9667 Рік тому

    Amazing explanation. Wonderful and useReducer is unforgettable now :)

  • @bilpo4729
    @bilpo4729 Рік тому

    Thank you for this amazing example!

  • @nikolaskadric7093
    @nikolaskadric7093 2 роки тому

    best tutorials on youtube, love your work bro ❤

  • @ozgurdogru2727
    @ozgurdogru2727 2 роки тому +7

    this series is a perfect. thank you so much. can you explain how to write responsive css without media query? and memoization please. thank you again

    • @aculz
      @aculz 2 роки тому +3

      responsive without media query much easier now using tailwind

  • @zuzukouzina-original
    @zuzukouzina-original 2 роки тому

    You’re very good bro! You make me a senior dev!!!

  • @hameeeed5992
    @hameeeed5992 3 місяці тому

    Very clear and precise

  • @dubaifatimaali
    @dubaifatimaali 2 роки тому

    Definitely going to try it. Thanks and keep on posting.

  • @kenhard
    @kenhard 2 роки тому

    Clean explanation, easy to watch, and overall great video, this is really helpful. Thank you so much!

  • @ImranKhan-ft7ns
    @ImranKhan-ft7ns 2 роки тому

    Thank you.. Your explanation is beginner friendly

  • @xyz-r7q
    @xyz-r7q Рік тому

    Thanks for the clear explanation!

  • @noobdev4181
    @noobdev4181 2 роки тому

    Great explanation. I just found your channel today. Subscribed. Thank you.
    Please do a playlist explaining all available react hooks. 💙

  • @harshbhardwaj6060
    @harshbhardwaj6060 9 місяців тому

    the best thing to do for complex topics is show how a particular that thing can be used in real world. Even if as a watcher I don't understand the whole thing but I know places where it needs to used so that I can try to use them there right away in my projects and It helps to better under stand them.

  • @ОлексійКудряшов
    @ОлексійКудряшов 2 роки тому

    thanks Lama! for your excellent tutorials and content! by thank you I mean joining the sponsoring group))

    • @LamaDev
      @LamaDev  2 роки тому

      Thanks for your support :)

  • @xcrxwadda8287
    @xcrxwadda8287 2 роки тому

    Thanks for this... keep dropping such topics ... very helpful , God bless you Lama

  • @delphineamaka9422
    @delphineamaka9422 Рік тому

    Here take your flowers for making this amazing video🎉🎉🎉

  • @احمد-ص4د3ق
    @احمد-ص4د3ق 2 роки тому

    Great explanation Lama Dev

  • @YoutCode0263
    @YoutCode0263 7 місяців тому

    short + effective + worth + valuable 😊❤

  • @MikdanJey
    @MikdanJey 2 роки тому +1

    Excellent explanation 👍🏼

  • @thekeys5730
    @thekeys5730 Рік тому

    thank you my teacher from morocco

  • @usmanmalik3575
    @usmanmalik3575 2 роки тому

    Lama thank you so much for everything, you are a true legend 🙌🙏

  • @Mauaka
    @Mauaka Рік тому

    If anyone is keen for a shorthand version of a useReducer, you can do something like this:
    const [state, dispatch] = useReducer((state, nextState) => {
    return {state, ...nextState}
    }, initState) // you still need to have initial state/default values for the reducer's state
    dispatch({ property_key_to_update: new_value }) // to update a value in the state, use dispatch

  • @barankaratas9318
    @barankaratas9318 2 роки тому +1

    Şafak bey içerikleriniz cok kaliteli teşekkür ederiz. Bir tane full stack mern uygulamasını Türkçe çekmeniz bizim için çok yararlı olacaktır. Şimdiden cok teşekkür ederiz.

  • @mraaroncruz
    @mraaroncruz Рік тому

    Dense and well explained. Thank you!

  • @saljeshmaharjan6760
    @saljeshmaharjan6760 Рік тому

    such a wonderful explanation, thank you

  • @parmaryash4406
    @parmaryash4406 2 роки тому +1

    Amazing explaination

  • @yohannmartinez7459
    @yohannmartinez7459 2 роки тому +4

    Great video, useReducer is a good way to exclude and manage well the logic of a components, for performance reasons i think that your ADD_TAG function should send all tags and not 1 by 1 but works well like this too :)

    • @g.c955
      @g.c955 2 роки тому

      yeah, I'd use a Set for tags and payload will tags directly. But I guess it's not really the point of this video :)

    • @DTUSEM
      @DTUSEM 2 роки тому +1

      I think then you need to split them in reducer files.

    • @g.c955
      @g.c955 2 роки тому

      @@DTUSEM what's wrong with `tags: new Set([...state.tags, ...payload])`, which would also remove any duplicates?

  • @ipunkk3578
    @ipunkk3578 2 роки тому

    I love it how you explain the concept and give an example, everythings clear.. Have u ever made tutorial about useEffect clean up function? I thinks its bit complicated to understand by reading on the documentation.. Thankyou so much!

  • @aishvaryamohite5985
    @aishvaryamohite5985 10 місяців тому

    Very nice video...I get a very much idea ...only 15 min of your video...thank you🎉

  • @rishavmehta6198
    @rishavmehta6198 2 роки тому

    Very informative tutorial.
    Please make a video on useMemo and useCallback hooks.

  • @丂卂丂乇匚卄丨卄卂

    Clean explanation ❤, Thank you so much

  • @emmanuelakogwu9078
    @emmanuelakogwu9078 2 роки тому

    LAMA DEV remains the bestest(if there is a word like that)

  • @Pareshbpatel
    @Pareshbpatel 2 роки тому

    The React useReducer hook beautifully explained. Thanks, Lama Dev
    {2022-08-17}, {2022-08-31}

  • @celestial8610
    @celestial8610 2 роки тому

    This is was incredible. I hope you can explain react context in the next video

  • @kishoreandra
    @kishoreandra 2 роки тому

    yet another informative video, thanks Lama 🙌

  • @parmaryash4406
    @parmaryash4406 2 роки тому +1

    Amazing series

  • @joshchant5003
    @joshchant5003 4 місяці тому

    That keyboard is heaven oh my

  • @remi6819
    @remi6819 2 роки тому

    We love to know what is a best way to do something, to increase performances, thanks !!

  • @marcusviniciuskoch550
    @marcusviniciuskoch550 2 роки тому

    incredible content, ill try to use it on my job

  • @mikhailwiseman5296
    @mikhailwiseman5296 2 роки тому

    "it's really easy to that.. " sure for u everything is easy Lama mdr thanks you a lot

  • @adityagoswami6881
    @adityagoswami6881 5 місяців тому

    Very informative .Thank you Sir 💯🙏

  • @shahemhaddad2717
    @shahemhaddad2717 2 роки тому

    Man your videos are fabulous keep going 👌

  • @gauravdwivedi-h5t
    @gauravdwivedi-h5t 5 місяців тому

    This is masterpiece of useReducer . Salute to you. Appreciate 🎉

  • @letsdoitsatumare
    @letsdoitsatumare 2 роки тому

    Great work, Lama!

  • @moreddy
    @moreddy 2 роки тому

    as always...you're the best on planet...THX A LOT....great explanation !!!

  • @josatienganh
    @josatienganh 6 місяців тому

    This video is really helpful! Thank you so much! ❤

  • @luanalves3419
    @luanalves3419 2 роки тому

    Great content!! greeting from Brazil

  • @fenixx0704
    @fenixx0704 2 роки тому

    omg, this video contains incredible explanation of that hook for beginners. It would have been so nice of you, if you could also do such explanation of useContext and maybe few more🔥🔥🔥👍👍👍

  • @jayantvasantkenjalkar6798
    @jayantvasantkenjalkar6798 Рік тому

    you are awesome, a quality explanation i can see here !!

  • @asvicnal8483
    @asvicnal8483 2 роки тому

    This really helps a lot, Thanks.