useReducer is BETTER than useState | React Hook useReducer Tutorial
HTML-код
- Опубликовано: 26 июн 2024
- Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
If you are building React apps with multiple state values to keep track of, your React apps need the useReducer hook! In this useReducer React Hook tutorial, you will learn how to apply useReducer to manage the state of your apps.
🚩 Subscribe ➜ bit.ly/3nGHmNn
🚀 React JS for Beginners full course - 9 hours: • React JS Full Course f...
🔗 Source Code: github.com/gitdagray/usereduc...
useReducer is BETTER than useState | React Hook useReducer Tutorial
(00:00) Intro
(00:12) Welcome and Overview
(01:05) useReducer vs useState
(01:53) Initializing useReducer
(03:33) Creating the reducer function
(05:42) Using dispatch and updating JSX
(07:12) Moving all state and handling an action payload
(08:25) An easy mistake to make
(10:01) Displaying state values in JSX
(12:44) Recommended: Action object lookup and dot notation
🔗 ES7 React JS Snippets Extension for VS Code:
marketplace.visualstudio.com/...
🔗 React Dev Tools Extension for Chrome:
chrome.google.com/webstore/de...
📚 References:
ReactJS Official site: reactjs.org/
React Wikipedia: en.wikipedia.org/wiki/React_(...)
React Jobs: www.ziprecruiter.com/candidat...
✅ Follow Me:
Twitter: / yesdavidgray
LinkedIn: / davidagray
Blog: yesdavidgray.com
Reddit: / daveoneleven
Was this tutorial about the React hook useReducer helpful? If so, please share. Let me know your thoughts in the comments.
#usereducer #react #hooks
![Remble - Colors (ft. Mozzy & Stoneda5th) [Official Music Video]](http://i.ytimg.com/vi/KF-3AU9g9xg/mqdefault.jpg)
The useReducer React hook seems more complicated at first, but after you learn how to use it, useReducer really simplifies state management compared to tracking many different pieces of state that are all implemented with the useState hook. Once you learn about the useReducer hook, I think you will agree! Just getting started with React? If so, I recommend starting with my 9 hour full course React tutorial here: ruclips.net/video/RVFAyFWO4go/видео.html
You have not demonstrated how to pass it to component. Please also make video of it.
@@Tajdev just pass it in an input parameter. Ex:
Showing how its similar to useState and rewriting it using useReducer makes it so much more clear! Thank you!
You're welcome!
the best tutorial for useReducer, super clear and simple to understand, what a teacher!
Glad it was helpful!
Tried many tutorials for learning useReducer, but got confused more only. Finally I found this video which is the perfect one!! Simple, great & straight forward!
Glad I could help!
What a great and easy-to-get explanation for a pretty confusing topic. Excellent work, thanks Dave!
Glad it was helpful!
Hands down the best tutorial. I am writing this comment after watching maybe 20+ videos and that too from top youtubers, but no one really simplified this much.
I just have a request, please make a medium size project using useContext for global state management and useReducer to change them. Pls.
Thank you, Sagar! I appreciate the request, too. I do need to post some projects. 🙏💯
Thank you very much sir. I’ve been having difficulties learning the useReducer hook. I get more confused reading articles and watching other videos. But thankfully You’ve explained and broken down the what, why and usage of this particular hook. I’m so grateful it’s a thumbs up for me👍
Glad it was helpful! 💯
I was having problems in learning reducer from a week or so and this video changed evrything, thanx a bunch
I'm literally in tears I watched so many tutorials of useReducer but this one is hands down the best one
Exactly what i was looking for, really appreciate your work buddy!
It's gotten to the stage where, if i'm unsure about something I just type in "question + Dave Gray" to youtube.
You have no idea how amazing it is to have a reliable source of information, when I was researching closures I came across so much conflicting information, after your video on them I vowed to make sure I looked at your videos as the main source of truth, they are clean, efficient, well explained and professional.
Thanks Dave.
That's the best compliment I could ask for! Thank you! 💯
Now I Understand more what we need useReducer hook. Great job.
Best tutorial and explanation I found - thank you Dave!
Glad it was helpful!
Watched many useReducer tutorials and this is the best! Simple, easy to follow and no digressing halfway.
Thank you!
Felt so much like small scale Redux. Loved how you explained everything. Great job 👍
Thank you!
There are a lot of great people teaching these subjects but wow you just made that simple. I just built a fullstack app and most the hold up was micromanaging pieces of state. Going to implement useReducer from here forward.
Glad it was helpful!
Great example and explanation! I haven’t seen the true value of useReducer until this video and I have been learning React for years.
Thanks so much! Used this before I attempted to use useReducer in my app and then felt way more confident about what I was going to do. Your vidoes are great, really appreciate it. When I have questions about something I try to find a video from you first!
Great to hear!
Buddy i am probably very late, as i now just started my interest in React ( company switched to some React based CRM ) , i came to thank you X milions for putting together this video, i finally understood state and it ticked in my head as now you gave me a visual representantion in my brain, please accept my thanks i wish you the best.
I finally got it. Well done tutorial, thank you.
best explanation i came across, thanx Dave...keep it up!
Many Thanks for the video!❤
After watching and studying several resources, your video made things clear to me.
Thanks man, your explanation is superb! Keep up the good work.
This was easy easy to understand.
The best useReducer tutorial so far.
Glad I could help! 💯
Nicely explained! Short, sweet and straight to the point. Thank you
Thank you! 💯
Thank you for the video and explanation, much easier to understand than the docs!
Thank you Dave! After so much time trying to understand the useReducer I finally made it! Thank you man!! :D
You're welcome! 💯
Thank you so much Dave! I was really trying to understand the use Reducer. This was so clear!
Glad I could help, Josef!
Just brilliant! I did so much refactoring and made my code look better and more reusable, after watching your videos, keep up the good work!
I'm glad I could help!
Thanks. Very clear explanation. My first real intro to useReducer. Looking forward to putting it into practice.
You're welcome, Noam 🙏💯
this is super duper amazing. Thank you Dave
You're welcome, Umair!
Very nice explanation. I had some trouble understanding this, but now it's all clear
Great to hear! 💯🚀
must admit, i saw at least 5 videos to understand useReducer hook.
the only one that was fully understandable for me was your video !
thank you, and keep your great job at explaining fully professional topics for young devs.
Dave, you are a blessing. Thank you ❤🔥
You're welcome!
I watched a lot of clips about useReducer and after this it is crystal clear to me so you are great and just keep it up because these are amazing videos and thank you very much for that! Big Greetings from Serbia Dave. :)
Great to hear from Serbia! And glad I could help 💯🙏
This is such a great explanation of useReducer! Thanks very much Dave 😍
Amazing. I was really lost in why and how to transition from useState to useReducer. Dave walks us through it step by step! Great examples and explanations! Thank you!
Glad it was helpful!
I finally understood it. Massive thank you!
Glad it helped!
Very clear and well explained! Thanks.
Glad it was helpful!
Best explanation so far. Appreciate you making this tutorial.
Glad it was helpful!
Excellent explanation! I was so confused using reducer
Glad it was helpful!
This is THE BEST tutorial for useReducer, tysm!
You're very welcome!
The best video to understand this concept. Thank man!!!
You're welcome!
You are simply Love!! Such a great video. Helped me alot. Clear toThePoint conCise and compreHensive❤
Went through a couple videos about useReducer and was about to give up and go back to Vanilla js lol. But you explained things super well!! Thanks so much! Subbed!
Glad I could help!
Thank you Dave. It is really cool
You're welcome!
Thank you! This is prolly the cleanest and best video for the useReducer hook I can find!
Glad it was helpful! 💯🙏
God gifted teacher😀Thanks
Thank you for the kind words, Mohammed! 🙏🙏
Thank you bro. This is a very good tutorial.
I was really having the problem of Redux stuff... But now I can understand where idea of Reducer came from but also dispatch, action and payload which looks like complicated stuff but after your explanation and I got the whole point of the thing. I am grateful of your amazing work from Uzbekistan !
You're welcome and hello 👋 to Uzbekistan!
Wow! You rocked it; Thanks Dave for this super and comprehensive video. I watch the very first second of the video, and I could run the app by myself. The rest was for better understanding 😉
You're welcome, Shayan!
Great content. I implement useReducer in my project for a form that fetches values from my API to several menus, the user chooses data from the menus and the UI gets updated and the entire form data it's validated at the same time. With useState, it got pretty messy. Now with useReducer it's much better, even though my reducer function got quite long. 😀😀😀
Thankfully the work in your reducer can also be delegated to separate functions.
Great video. Subscribed!
Thank you! 💯
What a great way to teach concepts! Subscribed to the channel already.
Welcome aboard!
This is much more comfortable to work with than using multiple useState hooks as I can manage all my states in one place,
I thought for a while that we can pass any property when calling dispatch function then in the reducer we can check whatever properties we passed,
I wasn't sure but after doing some research I found that we should use the type property and optionally the payload property when dispatching an action which makes things more organized,
sometimes my silliness helps me understand things better,
Thanks Dave,
Spot on Ahmad 💯 Thanks for the note!
Best tutorial for useReducer , you made it really easy to understand.
Thank you!
this is the video that i learnt useReducer hook and i equipped the knowledge to making a todo app all by useReducer without using useState.
thanks!🙌
Great to hear! 💯
How clear explanation, I ever found. Thanks Dave Gray..
You're welcome! 💯
Wow, the best explanation of usereducer hook, I've ever watched. Thank you very much!!!
You're welcome! 💯
Thank you so much. As always a great tutorial
You're welcome!
I'm from Poland, and for explaining word "dispatch" you have my subscription :D love ya lessons
Thank you!
Actually tried the useReducer hook for the first time yesterday..... This has provided a valuable insight to what useReducer really is. Good job.
Thank you! 🙏💯
Great video, very clearly explained.
Thanks,
Tom
You're welcome, Tom!
Subbed, great tutorial!
Welcome!
Thanks a ton for sharing your knowledge. I am now a subscriber to your channel and found some other best videos. Thanks a lot man
You're welcome! 💯
Man, thanks so much for explaining how to update multiple object properties in the same statement. I was pulling my hair out trying to figure out how to do what you did with the spread operator. I was changing one thing with useState and it was wiping out everything else in the object
Glad it helped! 💯
very well explained as always. THANK YOU
You are welcome! 💯
very clear explanation and easy to understand
thank you sir
You're welcome, Suri!
the best tutorial on the topic
Thank you! 🙏
Thx a lot, finally understood this
Glad it helped! 💯
Best explanation I've found of reducers 👍
Thank you, Faran! 🙏💯
thank you very much you saved my time
Instructive as always. Wish I had seen this video earlier it would've made my code much more optimal!
Glad it was helpful!
wow this has been so helpful
I was able to implement this in my project
Glad to hear that!
The best tutorial i watched that made it all easy.
Glad to hear that!
Thanks for giving a practical example
Glad it was helpful!
Thank you so much Dave
You're welcome!
Brilliant! Thank you so much!
You're welcome! 💯
Thanks. You are hero. Awesome way of teaching. Hope you make more advanced blogs for react
Thank you! 🙏
Thank you sir, great explanation and examples. Appreciated!
Glad it was helpful!
i don't know whether you will see this comment or not. i just wanted to thank you for making such a high quality, easy to understand tutorial. God bless you sensei.
That helps me a lot 🙏
Glad to hear it!
love you !
thank you mr.dave :)
Welcome!
Thank you very much for this wonderful tutorial.
You're very welcome! 💯
Thank you so much SIr Dave I believe you are one of the best Programming instructor in the world right now all programming stuff available in your channel for beginners, intermediate and even for experts as well
Thank you so much for your efforts and contribution
I'm following you from last 1,2 months for ReactJS you are just amazing teacher I found on this platform
Huge Love from Pakistan
So true.
Wow! Thankyou!!!!!
Great explanation! thanks!
You're welcome David! 💯
Very nice! A really great explanation!
Glad it was helpful!
@@DaveGrayTeachesCode It really was. Do you have any suggestion on how to implement this for mouse movement, where you will have to pass x and y coordinates?
Great video
Thanks man!!
You're welcome!
Very good tutorial yet again Dave! Just want to say it out loud, you really make me a better programmer with every new video. And I have a suggestion for a video... You see it really hard to grasp React for a beginner (even though I came with a diff prog. language experience) because it's so not intuitive and have so many caveats in developing process, SO it would be really helpful and useFull for us beginners if you could explain React pipeline in a tutorial video. For example, how React batching works (again basics), how component initially renders, how and why it re-renders... name a few. After watching your tutorial about calling useState twice in a row and not using prev => !prev was eye opening, but on another hand new question a raised why it working that way... Another example => I didn't know that React recreates a function and ALL inside it when state/prop updates. I think beginners will praise you for such a tutorial. Anyway, thank you so much again!
Thank you and thanks for the suggestion! 🙏💯
Yeah exactly! I don’t know how React really works and few people bother to explain it. I’m able to use hooks and make it work somehow but that’s just improvising most of the time. When the problem I face goes beyond the typical tutorial problems, I constantly add new hooks to fix the issues that the existing hooks create, without knowing why I even need the hooks I just added. I often find myself writing 10 useStates and 5 useEffects to coordinate the states within a single component. I’m often exclusively using hooks because I can’t be sure if local variables and functions would have worked. If they do, my code would have been so much easier to read and to maintain. A tutorial on React pipeline would be very useful!
i lilke the way you explain this, you speak "human" thats rare to have as a programmer and very important for a teacher! subscribed!
Thank you!
Coming here from NetNinja MERN course. I was stuck on the Context part where useReducer was used. This was really a great video. Great teaching, really matches with my way of learning (spoon feeding) :P. Overall, thank you professor.
Glad it was helpful!
Great tutorial.
Thank you!
nice explanation ...thanks for helping me :D
You're welcome!
Nice explanation of useReducer. 🙏
Thank you!
Thank you for greath explanation
You are welcome!
Good explanation related useReducer
Happy to help!
Waaaw thank you teacher dave greating you from somalia🇸🇴
You're welcome, Wiz! And hello to Somalia! 👋