Why I Love useReducer

Поделиться
HTML-код
  • Опубликовано: 28 апр 2019
  • React Hooks have been out for a couple of months now. I’ve had the chance to play with them during that time and recently found an amazing example of where the useReducer Hook really shines.
    I was so excited about how much stronger useReducer made my components that I had to share it with you.
    Have a watch and let me know if you also love useReducer!
    ------
    BLOG POST: hswolff.com/blog/why-i-love-u...
    SOURCE CODE: github.com/hswolff/youtube/tr...
    PATREON: / hswolff
    TWITTER: / hswolff
    SITE: hswolff.com/
  • НаукаНаука

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

  • @hswolff
    @hswolff  5 лет назад +46

    Thanks for watching everyone! I'm glad you're as excited about useReducer as I am!
    If you like the video and want to keep supporting more of it please consider becoming a Patreon supporter! Every little bit helps! ❤️ www.patreon.com/hswolff

  • @kgreen175
    @kgreen175 4 года назад +100

    This video just changed my life. I literally thought the whole reducer/dispatch usage was complicated and made no sense. YOU ARE A KUNG FOO TEACHER! This makes things much more DECLARATIVE and not so IMPERATIVE!

    • @hswolff
      @hswolff  4 года назад +4

      Hahahahahah thank you! So glad it clicked for you!

    • @JohnCamden
      @JohnCamden 4 года назад +7

      Totally agree. I was just about to dismiss reducer/dispatch as unnecessary, and I am so glad that I came across this video. Subscribe!

    • @electroheadfx
      @electroheadfx 3 года назад

      I totaly agree :))

  • @MainakGhosh7
    @MainakGhosh7 3 года назад +1

    Okay this is best explanation of useReducer I've found on internet.

  • @jaany
    @jaany 4 года назад +33

    Probably the best video I've seen on this. You're a great teacher and explain stuff well! Thanks Harry :)

    • @hswolff
      @hswolff  4 года назад +1

      Wonderful! So lovely to hear, thank you!

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

    The best explanation i ever heard, you explaining is like take our hand and explaining step by step 😂 so cool

  • @fluntimes
    @fluntimes 4 года назад

    Wow, great explanation of the hook and a really detailed but quick run through the thought process of developing this UI. Subbed!

  • @fredjudymom
    @fredjudymom 4 года назад +1

    This is one of the best explanations for useReducer that I have found! Thanks :)

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

    Thanks so much for one of the clearest explanations and demos I've seen on this - you are an excellent teacher!

  • @mahmodissa4169
    @mahmodissa4169 3 года назад +1

    Just loved your enthusiasm and vibe for programming! Keep rockin!!!

  • @voyageruk2002
    @voyageruk2002 4 года назад

    Great video, and really well explained. Thank you for taking the time to make this.

  • @michaelprenez-isbell8672
    @michaelprenez-isbell8672 2 года назад

    Hey Harry - this video really helped me with useReducer. Thank you for taking the time to make it.

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

    This was the best useReducer explanation I've seen on RUclips!

  • @driijko
    @driijko 4 года назад +3

    Distinguishing between the user experience and the underlying mechanics necessary for that experience made the use of useReducer so much more intuitive to me, thanks :)

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

    great tutorial, thank you for not tunnelling on the code and actually explaining the flow of things

  • @hunterjameso6096
    @hunterjameso6096 4 года назад

    This was great! Nice short and concise

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

    This is awesome and totally changed how I think about useReducer and handling form inputs. Thanks so much!

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

    Great video. Loved the practical use of useReducer

  • @fluntimes
    @fluntimes 4 года назад +1

    I keep coming back to this video because to me, it's the best tut on useReducer I have found.

    • @hswolff
      @hswolff  4 года назад

      Aww, thanks so much for saying so!

  • @LucaroP
    @LucaroP 3 года назад +4

    I'm fairly new in React, especially React Native (I've been studying this lib for like 2 months, max) and this video is amazing, gave me a lot of ideas how to manage state properly. Your explanation was on point, I understood everything about the useReducer even being a beginner and not speaking fluent english (I'm from Brazil). Thanks for the video.

  • @darrenlester7410
    @darrenlester7410 5 лет назад

    Excellent demo Harry, really made the benefits of useReducer clear to me. Thanks!

    • @hswolff
      @hswolff  5 лет назад

      You are welcome! Glad you enjoyed!

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

    Thanks Harry for this amazing video.
    It's been more than two years since this video has been uploaded on youtube, it gives me the answer what I should say about userReducer on my job interview.

  • @danielcranney
    @danielcranney 3 года назад

    Harry, your channel is underrated! I've been struggling to get my head around useReducer for the last days, finding that I understand the standard 'counter' tutorials in the documentation, but as soon I try to use them on forms, I came unstuck. This really helped me to get a MUCH better understanding of how useReducer can be used in more complex ways with inputs/selects and other elements. Thanks so much!

  • @GizmoMaltese
    @GizmoMaltese 3 года назад

    Great explanation. This is essentially how state machines are implemented. And yes, state transitions can get very complicated very quickly. This is exactly what I needed.

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

    What a great example! Thank you

  • @racheleedwards9060
    @racheleedwards9060 3 года назад

    Wow, this is magical! Definitely makes more sense how the functionality of useReducer is used from knowing Redux. This is greatly explained -- thanks for uploading!

  • @albert21994
    @albert21994 4 года назад +1

    Awesome explination! Thanks for the content!

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

    That's a really nice way of thinking about it - it's all about what the user is trying to do, hence 'actions'. 👍🏻

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

    Great explanation! Thanks a lot Harry!

  • @munirmahmud1415
    @munirmahmud1415 3 года назад

    Awesome explanation with a great example. I really learned a lot about useReducer hook.

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

    Thanks Harry. That is a great explanation of how useReducer works and why you would want to use it.

  • @UnawareBlaire
    @UnawareBlaire 5 лет назад +1

    Thanks for the video dude, I combined what I learned from this video and the "Advanced Hooks" video to create an app that serves a login page and a todolist with both being managed by useReducer. Pretty cool!

    • @hswolff
      @hswolff  5 лет назад

      Woo! That' s so great to hear! Congrats!

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

    Great video Harry. Thanks

  • @tusharrebaca
    @tusharrebaca 3 года назад +1

    This is awesome - your voice on top is crazy addictive :)

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

    You're an incredible teacher! Thank you so much!!

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

    Example was spot on :)

  • @EliasGuderian
    @EliasGuderian 3 года назад

    Best explanation that I have heard so far, thank you very much. subbed

  • @mormeshulam9580
    @mormeshulam9580 5 лет назад +1

    you are awesome. have a great experience to watch it

    • @hswolff
      @hswolff  5 лет назад

      So glad you liked it! Thank you!

  • @willhill8112
    @willhill8112 4 года назад +1

    Great video, just at the right time when I needed it

    • @hswolff
      @hswolff  4 года назад

      Awesome! Glad to hear!

  • @aregbesolajohn5281
    @aregbesolajohn5281 4 года назад

    thank you Harry, pretty awesome and clear tutorial...... great time to be using hooks!

    • @hswolff
      @hswolff  4 года назад

      Yes, I agree! Glad it helped!

  • @vincenguyendev
    @vincenguyendev 4 года назад

    Thank you for making such a really clear content! keep up a good work bro

    • @hswolff
      @hswolff  4 года назад

      Thanks for watching!

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

    Excellent video!

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

    Nice, really liked the video. Can't find many such insights online

  • @ashoksabal5486
    @ashoksabal5486 3 года назад

    Amazing video on useReducer 👍👍👍

  • @insaneviruss
    @insaneviruss 5 лет назад +1

    Great. Nice walk through and explaination!

  • @yogevstrauber8657
    @yogevstrauber8657 4 года назад

    Thank you Harry !
    Great video !!!

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

    this was a fantastic video, it had great pacing and the explanations were top notch. You made thsi very easy to understand. Definitely will be subscribing from this video.

  • @brunofilgueiras3518
    @brunofilgueiras3518 3 года назад

    just fell in love with this hook too hahaha. Thanks, Harry.

  • @DaRkOSeRrAnO1
    @DaRkOSeRrAnO1 3 года назад +1

    This video is AWESOME. Really useful!! Thank you : )

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

    This is a great explanation. Thanks

  • @wilraul9695
    @wilraul9695 3 года назад

    genius! great example now I can understand the reason of using useReducer thanks a lot for this great video

  • @jimarment
    @jimarment 4 года назад

    So good!!! Thanks for sharing.

  • @austinhall5880
    @austinhall5880 3 года назад

    Great video, you made it easy to follow! Thank you!

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

    This is immensely useful. Thank you :)

  • @RunnerBrain
    @RunnerBrain 3 года назад +1

    That's probably the best example of useReducer I have seen so far. I do agree that though longer, it definitely is more maintainable. I coded along and though imperative programming is still more natural to me, it got messy, and useReducer made so much sense. Thanks.

  • @ShinEduKen
    @ShinEduKen 5 лет назад

    This is the best useReducer explanation on YT. Thanks Harry!

    • @hswolff
      @hswolff  5 лет назад

      Thank you! Glad it was so helpful!

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

    Nice video bro .You helped clear my confusion of why should i use reducer instead of state.

  • @base4our
    @base4our 3 года назад

    Great explanation!

  • @joelei4179
    @joelei4179 4 года назад

    This is fantastic. I wrote a production feature that had 10+ useState hooks. It got messy really quick. This is exactly what I need. Thank you for the guide.

    • @hswolff
      @hswolff  4 года назад

      Woohoo!! So glad it helped!

  • @Samuels691
    @Samuels691 3 года назад

    This is the best explanation! Subscribed

  • @antoniott15
    @antoniott15 3 года назад

    Love the way that u change from useState to useReducer, really good video!

  • @Gabriel-cd5jx
    @Gabriel-cd5jx 3 года назад

    Very good tutorial. Thanks!

  • @bantinggamer4962
    @bantinggamer4962 4 года назад

    im totally going to try it tomorrow, thanks for the video!

    • @hswolff
      @hswolff  4 года назад

      Thanks for watching! I hope the trial goes well!

  • @JamesQQuick
    @JamesQQuick 4 года назад

    Great video. Converting over some of the code in my Gatsby site to use UseReducer. Thanks!!

    • @hswolff
      @hswolff  4 года назад

      Woohoo! Another happy convert!

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

    This was so great because you showed the "non reducer" part of this code to give context. Like the other comments, I had a nice, big, loud "A HA" moment. Really excellent job, thank you.

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

    thanks for the gem man . This videos is so helpful .

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

    amazing explanation, best teacher

  • @MarkDyck
    @MarkDyck 4 года назад

    This is brilliant. I’m working on a component that I’ve made needlessly complex. Dispatching based on user behaviour is an extremely helpful mental model. Thank you!

    • @hswolff
      @hswolff  4 года назад

      Woot! These are the things I love to hear! So glad it helped!

  • @ginger-viking
    @ginger-viking 5 лет назад

    Great video, thanks!

  • @aseel1024
    @aseel1024 3 года назад

    thank u, I was struggling to understand this, I got confused between useState and useReducer!
    I like the way u show how can useReducer do it better & clean way than using useState.
    this is the best way to teach

  • @AbhishekKumar-mq1tt
    @AbhishekKumar-mq1tt 5 лет назад +1

    Thank u for this awesome video

  • @koundamanee
    @koundamanee 4 года назад

    Thank you, really excellent tutorial on both React Hooks and Redux.

    • @hswolff
      @hswolff  4 года назад

      You are very welcome!

  • @zuhryfayesz-me6uy
    @zuhryfayesz-me6uy 3 года назад

    Fantastically explained the useReducer() .... Brilliant !!!!!

    • @hswolff
      @hswolff  3 года назад +1

      Glad it was helpful!

  • @BehruzbekOtayev
    @BehruzbekOtayev 3 года назад

    Wow, thanks for showing it with useState first. That made things much more clear. I don't know if I'd understood it without it. Kudos to you.

    • @hswolff
      @hswolff  3 года назад +1

      Tremendous! So glad to hear it!

  • @seungjuhong_01
    @seungjuhong_01 3 года назад

    Thank you for awesome video
    your videos are much helpful and make me motivated to study React

  • @bibhushankarki9194
    @bibhushankarki9194 3 года назад

    liked your explanation!

  • @joseandkris
    @joseandkris 4 года назад

    Amazing video, great job.

  • @mjonausk
    @mjonausk 3 года назад

    Good work. Thanks for contributing to peoples learning.

  • @santiagoojeda5177
    @santiagoojeda5177 5 лет назад

    Very clear and useful, thank you very much!

    • @hswolff
      @hswolff  5 лет назад

      Hey, thanks! Glad it helped!

  • @marinceanadrian5750
    @marinceanadrian5750 4 года назад

    Thanks a lot for your time! Although I still find useReducer a complicated hook, watching your video made it less impossible to comprehend

    • @hswolff
      @hswolff  4 года назад

      I'll take it!

  • @pritulkhan1395
    @pritulkhan1395 4 года назад

    Wow, this perfectly makes sense. Every tutorial out there only says "This is an alternative to useState" but never mentions why, and the practicality of useReducer. You just answered every skepticism I had about this. Much thanks, I have subscribed -- looking forward to more content!

    • @hswolff
      @hswolff  4 года назад +1

      That's so great to hear! The why is so important!

  • @Rolanditou
    @Rolanditou 4 года назад

    Damn!! Finally someone explained this in a way I 100% understood!!.... Thank You!! Liked & Subscribed! Can't wait for more from you, great content, example was perfect! really Good stuff

    • @hswolff
      @hswolff  4 года назад

      Welcome! Thank you!

  • @BookOfSaints
    @BookOfSaints 4 года назад +38

    12:37 and I thought I was good with keybindings. This is just witchcraft.

    • @hswolff
      @hswolff  4 года назад +5

      Haha 😆 🧙‍♂️

    • @strelkan
      @strelkan 4 года назад

      @@hswolff thats VS Code right? how you do that?

    • @felipealvesj
      @felipealvesj 4 года назад +6

      @@strelkan Alt+ctrl to extend your cursor and ctrl+shift to select until ",". I needed to try when i saw this lol

    • @SamuelRiveraGomez
      @SamuelRiveraGomez 4 года назад +6

      In Mac OS
      1. option + Shift and drag down/up to extend the cursor.
      2. option + Shift and ⬅️/ ➡️to select text.
      3. Then command + c to copy and command + v to paste. 🧙‍♀️

    • @pankajsharma-rf1ov
      @pankajsharma-rf1ov 3 года назад +1

      @@felipealvesj same here and ya thnx 4 this

  • @mcnimi
    @mcnimi 3 года назад

    i really enjoy your content. you're awesome. i also enjoy your humor :)

  • @makisetakashi
    @makisetakashi 4 года назад

    woooofff, great explanation sir

  • @abedjarjanazy1178
    @abedjarjanazy1178 3 года назад

    thanks a lot, it was a very clear a nice explanation

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

    You are a great teacher :)

  • @xdqd
    @xdqd 3 года назад

    I love this video. Learned so much from this :)

  • @srinivasjanardhan3752
    @srinivasjanardhan3752 4 года назад +1

    Man your cool!!! You presented it simpler. I wonder where were you 🤔when I was learning it from scratch.. keep up the good work.
    By the way subscribed👍

  • @inexplicable01
    @inexplicable01 4 года назад

    Love the explanation. Seems like use reducer is a way to make a bunch of state work together. It's like a mega state.

  • @pankajsharma-rf1ov
    @pankajsharma-rf1ov 3 года назад

    best tutorial for useReducer() hook on RUclips

  • @puyanwei
    @puyanwei 5 лет назад +1

    Been trying to get my head around useReducer recently w/o having any Redux experience. This is super useful man, thanks!

    • @hswolff
      @hswolff  5 лет назад

      Woo!! Great to hear!

    • @puyanwei
      @puyanwei 5 лет назад

      @@hswolff Quick question, is the reducer function (in this case loginReducer) typically put in the same place as the Component the state is used? Was kinda expecting the reducer function to go in a separate folder "reducers" or something, like redux.

    • @hswolff
      @hswolff  5 лет назад +1

      It's better to keep it in the same file as the component as that's the only place where it's going to be used. IMO easier to read if it's in the same file. If you want to share it (which is unlikely with useReducer, as it encourages it to be component level) then you could put it into its own file.

    • @perc-ai
      @perc-ai 5 лет назад +1

      @@hswolff you can also make your own custom resusable hooks and dispatch them!

  • @AnthonyKosky
    @AnthonyKosky 4 года назад

    I'm new to react and redux, thanks for sharing this. :)

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

    that field action type is a power move

  • @rohitkhanna8620
    @rohitkhanna8620 4 года назад

    Spot on!! Thanks

  • @kr0k0deilos
    @kr0k0deilos 5 лет назад

    Great tutorial, thanks!

    • @hswolff
      @hswolff  5 лет назад

      Woo! Thank you!

  • @amirnoorani5017
    @amirnoorani5017 3 года назад +1

    legendary! a practical example from what is wrong to what is right. Please make a video on React Context with your own words and experience and how it relates to useReducer

  • @salemouail627
    @salemouail627 3 года назад

    Hey even if this for beginners , i enjoyed watching this.
    U got a nice soul

  • @yogeshvishnole1264
    @yogeshvishnole1264 4 года назад

    great video sir j you rock

    • @hswolff
      @hswolff  4 года назад

      Haha, thanks!

  • @dxxta
    @dxxta 4 года назад

    this is the best video i've seen ever...so simpler....i loved it....thnks :)

    • @hswolff
      @hswolff  4 года назад

      Yay! You're welcome!

  • @brothercaleb
    @brothercaleb 3 года назад

    Wow. I’m convinced.