Why I Love useReducer

[@hswolff]

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]

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]

Hahahahahah thank you! So glad it clicked for you!

[@JohnCamden]

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]

I totaly agree :))

[@jaany]

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

[@hswolff]

Wonderful! So lovely to hear, thank you!

[@sebastianteaca7794]

that field action type is a power move

[@MainakGhosh7]

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

[@anton9410]

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

[@fluntimes]

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

[@hswolff]

Aww, thanks so much for saying so!

[@little_toast]

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

[@driijko]

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

[@XiagraBalls]

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

[@SepSol75]

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

[@michaelprenez-isbell8672]

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

[@pritulkhan1395]

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]

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

[@e4caspnet]

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

[@mcylinder]

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.

[@LucaroP]

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.

[@RunnerBrain]

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.

[@joelei4179]

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]

Woohoo!! So glad it helped!

[@TheANDAMIRO7]

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.

[@asbelljc5810]

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

[@GizmoMaltese]

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.

[@JamesQQuick]

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

[@hswolff]

Woohoo! Another happy convert!

[@BookOfSaints]

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

[@hswolff]

Haha 😆 🧙‍♂️

[@strelkan]

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

[@felipealvesj]

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

[@SamuelRiveraGomez]

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]

@@felipealvesj same here and ya thnx 4 this

[@BehruzbekOtayev]

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]

Tremendous! So glad to hear it!

[@humtohchutiyehai1016]

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

[@amirnoorani5017]

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

[@danielcranney]

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!

[@incebit3107]

I was doing so well and I have understand what problem the useReducer solves but I lost it when you started implementing it in code :"D

[@marinceanadrian5750]

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

[@hswolff]

I'll take it!

[@thru_and_thru]

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

[@CsabaKissColorado]

What a great example! Thank you

[@KungFuPandaria]

Thanks Harry, I've watched a number of videos spending a lot of time describing how to use useReducer but making rather lame attempts at the all important "WHY" you might use it. Your thoughts on improving reasonability via declarative code really drove this home for me, far more than the usual "Use reducer when you have more than 1 state" spiel.

[@avi7278]

dude, rarely i learn something new when I watch a react video that's actually immediately relevant and implementable. Bravo, bravo! I HATE these big huge lists of useState calls in my components. To me, all that stuff should not be in a component. It's just ugly. And this way of thinking and presenting component code in terms of user results rather than direct state is definitely the way to go. Thanks, dude. Then off of this I can imagine implementing something like a "requiresQueries" array, which then automatically fetches (or refetches) and caches user data (I use Apollo Client, gql server, etc) when certain actions are dispatched.

[@hswolff]

Yep! So glad it clicked for you!

[@mahmodissa4169]

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

[@aseel1024]

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

[@MarkDyck]

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]

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

[@darrenlester7410]

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

[@hswolff]

You are welcome! Glad you enjoyed!

[@gadayash9]

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

[@zuhryfayesz-me6uy]

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

[@hswolff]

Glad it was helpful!

[@racheleedwards9060]

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!

[@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.

[@carefree_ladka]

Great video. Loved the practical use of useReducer

[@pankajsharma-rf1ov]

best tutorial for useReducer() hook on KZbin

[@Pareshbpatel]

Very comprehensive demonstration of the useReducer hook's usefulness, delivered fluently. Thank you. {2021-10-28}

[@learnbit_bo]

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

[@puyanwei]

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

[@hswolff]

Woo!! Great to hear!

[@puyanwei]

@@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]

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]

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

[@antoniott15]

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

[@hswolff]

Thanks!

[@reyanrahman]

Really Great video one of the best explanation of reducer that I have ever seen but, can u tell me how u did the VS trick to copy all the state names at 12:40

[@munirmahmud1415]

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

[@fredjudymom]

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

[@tusharrebaca]

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

[@ShinEduKen]

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

[@hswolff]

Thank you! Glad it was so helpful!

[@EliasGuderian]

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

[@inexplicable01]

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

[@fluntimes]

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

[@liamlababidi8311]

That's so cool, I'm thinking of useReducer the same as Redux, GoodBye Redux!

[@mjonausk]

Good work. Thanks for contributing to peoples learning.

[@hswolff]

:)

[@sarathchandran2815]

Sir good video. Informative. Thanks. What is your vscode theme?

[@Powerful-Manifestor-]

Hey! Great video. I am new to React. 2 questions: 1. Why do we write reducers outside the component? 2. Why not have separate function doing whatever needs to be done for each event, combining all useState instead of using useReducer?

[@nmeibergen]

Great explanation! Thanks a lot Harry!

[@ashoksabal5486]

Amazing video on useReducer 👍👍👍

[@Samuels691]

This is the best explanation! Subscribed

[@pranav854]

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

[@masruralam6199]

amazing explanation, best teacher

[@nitsanbh]

Example was spot on :)

[@salemouail627]

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

[@PelFox]

This is so clean and well explained. Thank you! Im a backend developer trying to dip my toes into React. I just managed to clean up my contextProvider from having five different states and setters to just use a reducer. This also made my code elsewhere much more clean as well :) I can definitely see the gains start to kick in when you are working with nested structures rather than simple inputs. Right now I put my action, reducer and context in same file. Is this wise or is it better to put the reducer in a separate file, like people did with Redux? I'm using Typescript so I have type safety for my actions.

[@UnawareBlaire]

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]

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

[@mormeshulam9580]

you are awesome. have a great experience to watch it

[@hswolff]

So glad you liked it! Thank you!

[@DaRkOSeRrAnO1]

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

[@brunofilgueiras3518]

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

[@Rolanditou]

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]

Welcome! Thank you!

[@mikeyo5154]

Great video Harry. Thanks

[@vaylx2253]

This is immensely useful. Thank you :)

[@ViewFromAndromeda]

I wish I could give double likes on KZbin. This was just too amazing. Thanks a lot

[@robinkhilery8478]

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

[@hunterjameso6096]

This was great! Nice short and concise

[@voyageruk2002]

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

[@temzeks]

am i missing something, or i have smashed my head upon the screen trying to understand useReducer for the past three days, but this video makes it look so easy? TF?

[@albert21994]

Awesome explination! Thanks for the content!

[@seungjuhong_01]

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

[@willhill8112]

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

[@hswolff]

Awesome! Glad to hear!

[@franciscolopez8216]

Hy Harry! Thank you very much for this video! I love the simplicity of useReducer, as well as the useContext. Is there a way to replace redux with these 2 hooks? I have seen several videos but very simple examples apply in all of them, it seems that it really cannot be achieved to replace redux and all the boilerplate that it generates. What do you think?

[@farizbey]

This is a great explanation. Thanks

[@ikeybenzaken5330]

Great video! Thanks for posting!! Quick question - Why didn't you place the call to login() in the reducer? If we're decoupling the logic from the ui that seems to be the right move, no?

[@lucasdachman6775]

Ikey Benzaken The convention for reducers in redux/flux is that they should be pure functions and making a network request would introduce a side effect. I think that's just convention though

[@devagr]

Pretty good explaination! Though one small issue I'd say is the way you handled the metafields stuff (how you change the username and password through dispatcher). You are allowing anyone who is calling the dispatcher to set random fields inside your state to random values. Not that big of an issue, but something that might be worth a small refactor.

[@TheMitchingHour]

What formatter are you using Harry? I'm using prettier but it doesn't have an option for attributes on each line.

[@joefads5040]

I love this! Its so easy to get stuck in the mindset of the different states and interactions inside your component, when you bring it back to the user and the interactions they will take... it seems to really simplify things and prove the nicety of the useReducer hook! I recently used the useReducer hook for the first time with some complex component state (mesauring the widths of secondary navigation tabs... then adding them together... to see if the total width of all them fit inside some parent container... if there was no room then add them to a more dropdown!). If that makes sense?! Anyway long winded story on my use case for it!! :) Also got to play around with useLayoutEffect too!

[@bantinggamer4962]

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

[@hswolff]

Thanks for watching! I hope the trial goes well!

[@austinhall5880]

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

[@aregbesolajohn5281]

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

[@hswolff]

Yes, I agree! Glad it helped!

[@vincenguyendev]

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

[@hswolff]

Thanks for watching!

[@insaneviruss]

Great. Nice walk through and explaination!

[@hswolff]

Thank you!

[@Garycarlyle]

Could you do more of a TLDR? I think that will make the videos that much more useful. Sometimes when I catch them I am at work at I just want to get the general concept. Before delving into how to actually use it.

[@DedicatedManagers]

What did you do at 5:20 To turn the text into a ternary? Is that just an edit or a copy paste? Or was it some kind of wicked VS code command? Then at 6:20 you did some magic as well with the error state.

[@hswolff]

I think I sneakily copied and pasted it from an offline editor. No VS Code magic, just editing magic :)

[@srinivasjanardhan3752]

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👍

[@telis92]

Great video! Probably a dumb question but why are you using curly braces {} around username ,password when you are passing them as arguments in the login function? Does that notation have a name?

[@hswolff]

Talking about this? github.com/hswolff/youtube/blob/master/videos/why-i-love-usereducer/src/LoginUseReducer.js#L65 It's called object shorthand. Check out this tutorial alligator.io/js/object-property-shorthand-es6/

[@skyescrawford9774]

I found this video is really helpful, so I leave my comment here, thank you so much

[@hswolff]

Wonderful! Glad you did!

[@JoeBoo532]

@Harry Wolff you rock dude! quick question. This hook replaces Redux right??? 🤓

[@hswolff]

It can do things that Redux does. Redux is still good if you have data you want to share everywhere in your applicaiton.

[@snk-js]

best video of react of all time, bro

[@hswolff]

Ayy, thank you!