Why I Love useReducer
ฝัง
- เผยแพร่เมื่อ 16 ก.ย. 2024
- 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 :))
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!
Okay this is best explanation of useReducer I've found on internet.
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 :)
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.
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!
great tutorial, thank you for not tunnelling on the code and actually explaining the flow of things
This was the best useReducer explanation I've seen on TH-cam!
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.
That's a really nice way of thinking about it - it's all about what the user is trying to do, hence 'actions'. 👍🏻
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.
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!
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!
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.
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!
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!
Hey Harry - this video really helped me with useReducer. Thank you for taking the time to make it.
What a great example! Thank you
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.
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!
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
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.
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
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
best tutorial for useReducer() hook on TH-cam
Just loved your enthusiasm and vibe for programming! Keep rockin!!!
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.
Great video. Loved the practical use of useReducer
Great video. Converting over some of the code in my Gatsby site to use UseReducer. Thanks!!
Woohoo! Another happy convert!
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
that field action type is a power move
Nice, really liked the video. Can't find many such insights online
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!
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!
Love the explanation. Seems like use reducer is a way to make a bunch of state work together. It's like a mega state.
Fantastically explained the useReducer() .... Brilliant !!!!!
Glad it was helpful!
This is awesome - your voice on top is crazy addictive :)
This is one of the best explanations for useReducer that I have found! Thanks :)
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!
Great explanation! Thanks a lot Harry!
This is awesome and totally changed how I think about useReducer and handling form inputs. Thanks so much!
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!
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.
Excellent demo Harry, really made the benefits of useReducer clear to me. Thanks!
You are welcome! Glad you enjoyed!
Amazing video on useReducer 👍👍👍
Wow, great explanation of the hook and a really detailed but quick run through the thought process of developing this UI. Subbed!
Example was spot on :)
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!
Great video Harry. Thanks
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)
Love the way that u change from useState to useReducer, really good video!
Thanks!
you are awesome. have a great experience to watch it
So glad you liked it! Thank you!
Awesome explanation with a great example. I really learned a lot about useReducer hook.
amazing explanation, best teacher
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?
This was great! Nice short and concise
This is the best explanation! Subscribed
Awesome explination! Thanks for the content!
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!
Very comprehensive demonstration of the useReducer hook's usefulness, delivered fluently. Thank you.
{2021-10-28}
Good work. Thanks for contributing to peoples learning.
:)
This is a great explanation. Thanks
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?
This is immensely useful. Thank you :)
Great video, just at the right time when I needed it
Awesome! Glad to hear!
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're an incredible teacher! Thank you so much!!
genius! great example now I can understand the reason of using useReducer thanks a lot for this great video
Great video, and really well explained. Thank you for taking the time to make this.
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👍
Excellent video!
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!
My mom is rolling her eyes. She used to use punch cards. They where neatly organized into functions.... Now people have emotional attachment to them.
...Same people who say functional programming is the future. XD
Very good tutorial. Thanks!
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
just fell in love with this hook too hahaha. Thanks, Harry.
Great. Nice walk through and explaination!
Thank you!
Best explanation that I have heard so far, thank you very much. subbed
Great explanation!
This video is AWESOME. Really useful!! Thank you : )
thanks for the gem man . This videos is so helpful .
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!
this is absolutely amazing. React took some time but now it looks like its closer to the mental model we all have while coding a component: what we want the user to be able to DO. With this in mind, which global state package (i.e. Redux) would be the best one to use with React now to mesh with this new hook api?
Obrigado for the explanation, I think I'm gently "stealing" some of your concepts to bring more examples of how to handle it for juniors here in Brazil, if you so agree.
Haha feel free! Glad to see the knowledge spread!
Very helpful, even after 3 years
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!
That's so cool, I'm thinking of useReducer the same as Redux, GoodBye Redux!
For people bashing redux. Redux uses React context. You should think of redux as context on steroids. Redux dev tools are so good.
Absolutely! Great to point out!
And dan abranov created redux and he is on the react team now. That’s why usereducer looks so familiar to redux users
@@rtorcato bringing baby to home :)
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!
im totally going to try it tomorrow, thanks for the video!
Thanks for watching! I hope the trial goes well!
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.
I wish I could give double likes on TH-cam. This was just too amazing. Thanks a lot
You are a great teacher :)
liked your explanation!