useReducer is BETTER than useState | React Hook useReducer Tutorial

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

[@DaveGrayTeachesCode]

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: kzbin.info/www/bejne/iIepcqx8jLRnndE

[@Tajdev]

You have not demonstrated how to pass it to component. Please also make video of it.

[@m1dway]

@@Tajdev just pass it in an input parameter. Ex:

[@minimumt3n204]

Showing how its similar to useState and rewriting it using useReducer makes it so much more clear! Thank you!

[@DaveGrayTeachesCode]

You're welcome!

[@jingli9232]

the best tutorial for useReducer, super clear and simple to understand, what a teacher!

[@DaveGrayTeachesCode]

Glad it was helpful!

[@Andi-rd8yf]

Exactly what i was looking for, really appreciate your work buddy!

[@andrews13]

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!

[@DaveGrayTeachesCode]

Glad I could help!

[@try-b2k]

I was having problems in learning reducer from a week or so and this video changed evrything, thanx a bunch

[@El_kammex]

Now I Understand more what we need useReducer hook. Great job.

[@purushottamkute7485]

I'm literally in tears I watched so many tutorials of useReducer but this one is hands down the best one

[@vincejones3381]

Great example and explanation! I haven’t seen the true value of useReducer until this video and I have been learning React for years.

[@ilivetruth]

Thank you for the video and explanation, much easier to understand than the docs!

[@ahmedk4345]

best explanation i came across, thanx Dave...keep it up!

[@SimPwear84]

Nicely explained! Short, sweet and straight to the point. Thank you

[@DaveGrayTeachesCode]

Thank you! 💯

[@pablocodeglia]

What a great and easy-to-get explanation for a pretty confusing topic. Excellent work, thanks Dave!

[@DaveGrayTeachesCode]

Glad it was helpful!

[@syeds8314]

Many Thanks for the video!❤ After watching and studying several resources, your video made things clear to me.

[@xungngo]

Thanks man, your explanation is superb! Keep up the good work.

[@joseff5998]

Thank you so much Dave! I was really trying to understand the use Reducer. This was so clear!

[@DaveGrayTeachesCode]

Glad I could help, Josef!

[@hannah51238]

This is such a great explanation of useReducer! Thanks very much Dave 😍

[@confusedGuenni]

I finally got it. Well done tutorial, thank you.

[@4t196]

This was easy easy to understand. The best useReducer tutorial so far.

[@DaveGrayTeachesCode]

Glad I could help! 💯

[@BabaNoami]

Thanks. Very clear explanation. My first real intro to useReducer. Looking forward to putting it into practice.

[@DaveGrayTeachesCode]

You're welcome, Noam 🙏💯

[@maxwellosuji4096]

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👍

[@DaveGrayTeachesCode]

Glad it was helpful! 💯

[@kaioqrz]

Thank you Dave! After so much time trying to understand the useReducer I finally made it! Thank you man!! :D

[@DaveGrayTeachesCode]

You're welcome! 💯

[@user-ol6tq5hw7s]

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

[@DaveGrayTeachesCode]

Great to hear from Serbia! And glad I could help 💯🙏

[@zb2747]

Best tutorial and explanation I found - thank you Dave!

[@DaveGrayTeachesCode]

Glad it was helpful!

[@arungrg]

Felt so much like small scale Redux. Loved how you explained everything. Great job 👍

[@DaveGrayTeachesCode]

Thank you!

[@neo90sr]

Very nice explanation. I had some trouble understanding this, but now it's all clear

[@DaveGrayTeachesCode]

Great to hear! 💯🚀

[@javadrip]

Watched many useReducer tutorials and this is the best! Simple, easy to follow and no digressing halfway.

[@DaveGrayTeachesCode]

Thank you!

[@Un0Real333]

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!

[@DaveGrayTeachesCode]

I'm glad I could help!

[@stokedonthestoke]

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!

[@DaveGrayTeachesCode]

Great to hear!

[@shayanfaghihi]

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 😉

[@DaveGrayTeachesCode]

You're welcome, Shayan!

[@JedOpeningThings]

Thank you! This is prolly the cleanest and best video for the useReducer hook I can find!

[@DaveGrayTeachesCode]

Glad it was helpful! 💯🙏

[@SagarKumar-db2xy]

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.

[@DaveGrayTeachesCode]

Thank you, Sagar! I appreciate the request, too. I do need to post some projects. 🙏💯

[@danielconde2729]

Excellent explanation! I was so confused using reducer

[@DaveGrayTeachesCode]

Glad it was helpful!

[@mtsurov]

Best explanation so far. Appreciate you making this tutorial.

[@DaveGrayTeachesCode]

Glad it was helpful!

[@randomtalks5253]

You are simply Love!! Such a great video. Helped me alot. Clear toThePoint conCise and compreHensive❤

[@BrainAido]

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.

[@umairqamar2672]

this is super duper amazing. Thank you Dave

[@DaveGrayTeachesCode]

You're welcome, Umair!

[@jonathanmcgee654]

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!

[@DaveGrayTeachesCode]

Glad it was helpful!

[@amancandream]

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!

[@DaveGrayTeachesCode]

Glad I could help!

[@barreg17]

I finally understood it. Massive thank you!

[@DaveGrayTeachesCode]

Glad it helped!

[@adi4057]

The best video to understand this concept. Thank man!!!

[@DaveGrayTeachesCode]

You're welcome!

[@fabricio-garcia]

What a great way to teach concepts! Subscribed to the channel already.

[@DaveGrayTeachesCode]

Welcome aboard!

[@AndreeaCozariuc]

Dave, you are a blessing. Thank you ❤‍🔥

[@DaveGrayTeachesCode]

You're welcome!

[@gogas2860]

Wow, the best explanation of usereducer hook, I've ever watched. Thank you very much!!!

[@DaveGrayTeachesCode]

You're welcome! 💯

[@dranix5018]

Very clear and well explained! Thanks.

[@DaveGrayTeachesCode]

Glad it was helpful!

[@internetdrew]

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.

[@DaveGrayTeachesCode]

Glad it was helpful!

[@ssj1260]

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.

[@DaveGrayTeachesCode]

That's the best compliment I could ask for! Thank you! 💯

[@masruralam6199]

How clear explanation, I ever found. Thanks Dave Gray..

[@DaveGrayTeachesCode]

You're welcome! 💯

[@ihateorangecat]

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!🙌

[@DaveGrayTeachesCode]

Great to hear! 💯

[@ashharkausar413]

Instructive as always. Wish I had seen this video earlier it would've made my code much more optimal!

[@DaveGrayTeachesCode]

Glad it was helpful!

[@focusroom_]

This is THE BEST tutorial for useReducer, tysm!

[@DaveGrayTeachesCode]

You're very welcome!

[@TrueSQN]

I'm from Poland, and for explaining word "dispatch" you have my subscription :D love ya lessons

[@DaveGrayTeachesCode]

Thank you!

[@muhammedozalp]

Thank you bro. This is a very good tutorial.

[@broomybroomybroomy]

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

[@DaveGrayTeachesCode]

Glad it helped! 💯

[@iidiez872]

Best tutorial for useReducer , you made it really easy to understand.

[@DaveGrayTeachesCode]

Thank you!

[@tomnewton3191]

Great video, very clearly explained. Thanks, Tom

[@DaveGrayTeachesCode]

You're welcome, Tom!

[@abdulazizmashrabov6399]

Thanks. You are hero. Awesome way of teaching. Hope you make more advanced blogs for react

[@DaveGrayTeachesCode]

Thank you! 🙏

[@suri5023]

very clear explanation and easy to understand thank you sir

[@DaveGrayTeachesCode]

You're welcome, Suri!

[@jamshidtashkent1976]

Thank you Dave. It is really cool

[@DaveGrayTeachesCode]

You're welcome!

[@AvinashSingh-ts1cn]

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

[@DaveGrayTeachesCode]

You're welcome! 💯

[@verydifferentthought]

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 !

[@DaveGrayTeachesCode]

You're welcome and hello 👋 to Uzbekistan!

[@Jawad_Siddiqui]

God gifted teacher😀Thanks

[@DaveGrayTeachesCode]

Thank you for the kind words, Mohammed! 🙏🙏

[@clevercoderjoy]

wow this has been so helpful I was able to implement this in my project

[@DaveGrayTeachesCode]

Glad to hear that!

[@sdfsdfsdffdsfsdfsd123]

very well explained as always. THANK YOU

[@DaveGrayTeachesCode]

You are welcome! 💯

[@ahmad-murery]

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,

[@DaveGrayTeachesCode]

Spot on Ahmad 💯 Thanks for the note!

[@mattstopa9436]

Thanks for giving a practical example

[@DaveGrayTeachesCode]

Glad it was helpful!

[@ebesquin]

Thank you so much. As always a great tutorial

[@DaveGrayTeachesCode]

You're welcome!

[@farantariq3481]

Best explanation I've found of reducers 👍

[@DaveGrayTeachesCode]

Thank you, Faran! 🙏💯

[@RS-iy2bm]

The best tutorial i watched that made it all easy.

[@DaveGrayTeachesCode]

Glad to hear that!

[@MuhammadBilal-ry5rb]

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

[@codingispower1816]

So true.

[@felixlutrovnik345]

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.

[@leoMC4384]

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. 😀😀😀

[@CottidaeSEA]

Thankfully the work in your reducer can also be delegated to separate functions.

[@toppmoviehighlights]

Actually tried the useReducer hook for the first time yesterday..... This has provided a valuable insight to what useReducer really is. Good job.

[@DaveGrayTeachesCode]

Thank you! 🙏💯

[@kamaboko1]

Great video. Subscribed!

[@DaveGrayTeachesCode]

Thank you! 💯

[@ahmedmohned387]

Thank you very much for this wonderful tutorial.

[@DaveGrayTeachesCode]

You're very welcome! 💯

[@jeetsingh-sy5ij]

Thank you sir, great explanation and examples. Appreciated!

[@DaveGrayTeachesCode]

Glad it was helpful!

[@filippocamagni]

Brilliant! Thank you so much!

[@DaveGrayTeachesCode]

You're welcome! 💯

[@wahhaab7]

Thx a lot, finally understood this

[@DaveGrayTeachesCode]

Glad it helped! 💯

[@Programming162]

thank you very much you saved my time

[@pfcokelly]

Subbed, great tutorial!

[@DaveGrayTeachesCode]

Welcome!

[@flowerofash4439]

i lilke the way you explain this, you speak "human" thats rare to have as a programmer and very important for a teacher! subscribed!

[@DaveGrayTeachesCode]

Thank you!

[@hamzapaskingakhtar]

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.

[@DaveGrayTeachesCode]

Glad it was helpful!

[@phucwall121]

Thank you so much Dave

[@DaveGrayTeachesCode]

You're welcome!

[@joakimwretlind4016]

Very nice! A really great explanation!

[@DaveGrayTeachesCode]

Glad it was helpful!

[@joakimwretlind4016]

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

[@anaslaraki]

the best tutorial on the topic

[@DaveGrayTeachesCode]

Thank you! 🙏

[@benarcher372]

Excellent. Now I know what to replace Redux with in my small projects.

[@DaveGrayTeachesCode]

Right on Ben! 💯

[@da.b3102]

Great explanation! thanks!

[@DaveGrayTeachesCode]

You're welcome David! 💯

[@sadamali6691]

Waaaw thank you teacher dave greating you from somalia🇸🇴

[@DaveGrayTeachesCode]

You're welcome, Wiz! And hello to Somalia! 👋

[@johnforeverrules]

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.

[@dzentsetsu5607]

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!

[@DaveGrayTeachesCode]

Thank you and thanks for the suggestion! 🙏💯

[@taosit5282]

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!

[@THEJOAMS]

That helps me a lot 🙏

[@DaveGrayTeachesCode]

Glad to hear it!

[@gezafiqrullah5321]

thank you mr.dave :)

[@DaveGrayTeachesCode]

Welcome!

[@user-ki2xb3hk8r]

Wow! Thankyou!!!!!

[@OnlyPlayStation5]

The best video I watched for usereducer, can you please do all react hooks

[@DaveGrayTeachesCode]

Thank you! My React Hooks playlist has most: kzbin.info/aero/PL0Zuz27SZ-6PSdiQpSxO9zxvB0ns6m3ta

[@parasmehta7793]

Thanks man!!

[@DaveGrayTeachesCode]

You're welcome!

[@lightrao]

love you !

[@abdallahazouz5948]

nice explanation ...thanks for helping me :D

[@DaveGrayTeachesCode]

You're welcome!

[@iustin4172]

Great video

[@cleancode2123]

Nice explanation of useReducer. 🙏

[@DaveGrayTeachesCode]

Thank you!

[@pedrojunior4516]

Great tutorial.

[@DaveGrayTeachesCode]

Thank you!