Why I Love useReducer
Вставка
- Опубліковано 10 лют 2025
- 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/bl...
SOURCE CODE: github.com/hsw...
PATREON: / hswolff
TWITTER: / hswolff
SITE: hswolff.com/
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
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!
Hahahahahah thank you! So glad it clicked for you!
Totally agree. I was just about to dismiss reducer/dispatch as unnecessary, and I am so glad that I came across this video. Subscribe!
I totaly agree :))
that field action type is a power move
Okay this is best explanation of useReducer I've found on internet.
Probably the best video I've seen on this. You're a great teacher and explain stuff well! Thanks Harry :)
Wonderful! So lovely to hear, thank you!
The best explanation i ever heard, you explaining is like take our hand and explaining step by step 😂 so cool
I keep coming back to this video because to me, it's the best tut on useReducer I have found.
Aww, thanks so much for saying so!
This was the best useReducer explanation I've seen on UA-cam!
great tutorial, thank you for not tunnelling on the code and actually explaining the flow of things
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.
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 :)
That's a really nice way of thinking about it - it's all about what the user is trying to do, hence 'actions'. 👍🏻
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.
Hey Harry - this video really helped me with useReducer. Thank you for taking the time to make it.
Thanks Harry. That is a great explanation of how useReducer works and why you would want to use it.
Thanks so much for one of the clearest explanations and demos I've seen on this - you are an excellent teacher!
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.
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!
That's so great to hear! The why is so important!
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.
Woohoo!! So glad it helped!
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.
What a great example! Thank you
This is awesome and totally changed how I think about useReducer and handling form inputs. Thanks so much!
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.
Just loved your enthusiasm and vibe for programming! Keep rockin!!!
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!
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.
Tremendous! So glad to hear it!
Nice video bro .You helped clear my confusion of why should i use reducer instead of state.
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.
Excellent demo Harry, really made the benefits of useReducer clear to me. Thanks!
You are welcome! Glad you enjoyed!
Great video. Converting over some of the code in my Gatsby site to use UseReducer. Thanks!!
Woohoo! Another happy convert!
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
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!
Woot! These are the things I love to hear! So glad it helped!
Fantastically explained the useReducer() .... Brilliant !!!!!
Glad it was helpful!
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
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
genius! great example now I can understand the reason of using useReducer thanks a lot for this great video
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.
Great video. Loved the practical use of useReducer
Thanks a lot for your time! Although I still find useReducer a complicated hook, watching your video made it less impossible to comprehend
I'll take it!
Love the way that u change from useState to useReducer, really good video!
Thanks!
This is the best useReducer explanation on YT. Thanks Harry!
Thank you! Glad it was so helpful!
Been trying to get my head around useReducer recently w/o having any Redux experience. This is super useful man, thanks!
Woo!! Great to hear!
@@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.
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.
@@hswolff you can also make your own custom resusable hooks and dispatch them!
best tutorial for useReducer() hook on UA-cam
Very comprehensive demonstration of the useReducer hook's usefulness, delivered fluently. Thank you.
{2021-10-28}
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!
Awesome explanation with a great example. I really learned a lot about useReducer hook.
This is awesome - your voice on top is crazy addictive :)
Best explanation that I have heard so far, thank you very much. subbed
This is one of the best explanations for useReducer that I have found! Thanks :)
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.
Yep! So glad it clicked for you!
Love the explanation. Seems like use reducer is a way to make a bunch of state work together. It's like a mega state.
Great explanation! Thanks a lot Harry!
You're an incredible teacher! Thank you so much!!
12:37 and I thought I was good with keybindings. This is just witchcraft.
Haha 😆 🧙♂️
@@hswolff thats VS Code right? how you do that?
@@strelkan Alt+ctrl to extend your cursor and ctrl+shift to select until ",". I needed to try when i saw this lol
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. 🧙♀️
@@felipealvesj same here and ya thnx 4 this
Nice, really liked the video. Can't find many such insights online
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?
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
Welcome! Thank you!
you are awesome. have a great experience to watch it
So glad you liked it! Thank you!
Great video Harry. Thanks
Good work. Thanks for contributing to peoples learning.
:)
Wow, great explanation of the hook and a really detailed but quick run through the thought process of developing this UI. Subbed!
Amazing video on useReducer 👍👍👍
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
This is the best explanation! Subscribed
im totally going to try it tomorrow, thanks for the video!
Thanks for watching! I hope the trial goes well!
This video is AWESOME. Really useful!! Thank you : )
This is a great explanation. Thanks
Example was spot on :)
Thank you for awesome video
your videos are much helpful and make me motivated to study React
This is immensely useful. Thank you :)
thanks for the gem man . This videos is so helpful .
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!
Woo! That' s so great to hear! Congrats!
just fell in love with this hook too hahaha. Thanks, Harry.
Great video, and really well explained. Thank you for taking the time to make this.
Great video, just at the right time when I needed it
Awesome! Glad to hear!
amazing explanation, best teacher
It also means when you've got lots of child components that need to interact with the parent component you can just pass the reducer and dispatch as props, instead of having to manage lots of different sate in the props.
You can use one useState with actions (functions for state changing) and get the same result, but without boilerplate and with simpler types (if use TS)
This was great! Nice short and concise
Very good tutor, really! There is one issue though: `isLoading: false` should be added to the 'logout' case; otherwise you cannot log in again without a browser refresh.
Good catch!
Awesome explination! Thanks for the content!
Hey even if this for beginners , i enjoyed watching this.
U got a nice soul
That's so cool, I'm thinking of useReducer the same as Redux, GoodBye Redux!
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.
Thank you for making such a really clear content! keep up a good work bro
Thanks for watching!
Great video, you made it easy to follow! Thank you!
thank you Harry, pretty awesome and clear tutorial...... great time to be using hooks!
Yes, I agree! Glad it helped!
thanks a lot, it was a very clear a nice explanation
Thank you for that.
The best thing about redux, is the shared application state for the entire application, and also the middlewares which offer system wide side effects such as persistence to localstorage among other things.
Redux is so much boilerplate however and in most cases, I find that alot of state stored in reducers is more suitable to component level state (form entry and validation!!!!)
It is a useful tool however!
100% agreed!
Thank you Harry !
Great video !!!
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.
liked your explanation!
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?
Great. Nice walk through and explaination!
Thank you!
What's the shortcut for moving cursor to the end/beginning of a word?
Wow. I’m convinced.
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!
Great explanation!
I found this video is really helpful, so I leave my comment here, thank you so much
Wonderful! Glad you did!