The second example was a lot to take in but I think once I understand the design pattern, the whole concept becomes clear. Thank you for the great explanation
You made it very easy kyle Thank you so much here is my learning from the above explanation:- 1.) UseReducer hook gives us an array of [state,dispatch] same as useState hook and use Reducer itself takes an reducer function , inital state. 2.) Whenver we runs an dispatch function the reducer function get's triggered and with the help of reducer function we can update new state. 3.) Reducer function takes 2 arguments which is the current state and action and the parameter action is used to write the logic based on the dispatch action type. 4.) Dispatch function takes an object (action) which contains two things action_type the action which we want to perform and also it takes payload which contains all the variables which we want to pass to over reducer function. Once Again thank you so much Kyle for the great explanation.
That answers the question in my head : “why would I use useReducer while I have useState” because it’s always being compared to useState or explained with simple increment Function. Instead of saying they’re similar, saying that you can group multiple functions through conditions in a master function in order manage state in various ways, minimize prop drills and coming up with a simple todo app as you did was genious! Thanks man, I learn a lot from your tuts
Can't believe I comeback to this video again after 1 year. I bumped with useReducer in a react project and relized I completely frogot about how it works. Thank you again Kyle!!
Kyle - Thanks for these great videos. I actually ran into issue the other day at work and went back to one of your videos and articles I'm subscribed to and it helped me in getting that bug fixed. Keep up the good work, man!
This video is amazing. It's the best tutorial on useReducer I've seen! I love how easy it is to follow because you started with a really easy example by replacing useState with useReducer and then moved on to a more complex one with the todo app.
I spent like two days on a udemy course trying to understand this concept and the guy was WAY overcomplicating it and this video saved my life lol, someone from that course linked this video in the lecture comments and it's the ONLY way I got past that part of the course. THANK YOU
You have done such a fantastic explanation 🎉🎉🎉 I have watched Indian channels code with Harry thappa technical but I never understood But yours explanation was best
GREATEST ONE AT ALL. I was taking a course in 'UDEMY' and he was teaching useReducer but personally I didn't understand anything. This one was so helpful Thank you for your effort and for simplifying the web for us ^ ^ ;
Senior developers know more about engineering in general. System Design, Data Structures, OOP, communication are all skills that senior devs will need to know. I know I'm going to catch so much hate for this.
@@RickyGarcia_Learning that is 100% correct, primarily system design and TONS of social skills that young people lack. Being a senior isnt only being able to program on your own, its being able to lead a team of devs, something young devs without much work experience will just lack. simplifies is really knowledgeable in the tech aspect tho for sure!
well, this is not senior level, this is React basics. don't get me wrong, I really like his videos, but you can't tell he knows more than a Senior developer just by looking at this video.
Great tutorial Kyle . For beginners second to-do example might be difficult but dont give up try to understand today tomorrow until you get it and watch this video 2-3 times and read some articles on the internet.
Mate I've discovered your channel yesterday. I am not a frontend guy, but since yesterday I watched over 10 videos and bought one of courses which btw is flawless!! Love your presenting style and the content!! I have had senior guys in my teams that don't know 1/10th of the things you teach here!! And most importantly you cut to the chase, no BS!! Kudos and keep going!! Thanks for inspiring us!
"The idea behind useReducer is it gives you a more concrete way to handle complex state so it gives you to set actions that you can perform on your state and it's going to convert your current state to a new version of the state based the action you send it."
I have always had an issue in wrapping my head around State Management. After watching this not only I got familiar but understood state management concepts in general. I was able read and implement Redux (In Production) after watching this. After seeing the benefits, I went ahead implemented state management in Angular(Akita) application(In Production). You should do another video on Redux with Redux Toolkit. It would benefit many people like me.
Can you please do a video on some flux design patterns with Context, useReducer, and async calls to an API? Im trying to replace Redux and Thunk with pure React hooks. Thank you for your videos!
@@farhanvk7586 As far as I understand it, Redux creates a global store for your app, and there is no convenient way of doing that with just hooks. But you can capture some state in one component with useContext, and then import that state in any other component and use it there.
@@Andrewiththeaudi yes, if context API works then use it. th-cam.com/video/lG6Z0FQj_SI/w-d-xo.html This video gives a good explanation of context API and some other react tips.
Dude, useReducer just blew my mind. After building an app with more than 20 functions that update the state being passed around, just a useReducer would have been so much better. Great explanation Kyle! So much better than going through the pain of Redux while keeping the benefits of state management
I was confused about this hook and even some others but now I am clear and can use where it needs. So, going to watch the other tuts of hooks. Thank you very much for the clarification with a live example
This is incredible. I'm pretty new to react. I once tried using useState for a complicated state and ended up abandoning the project lol. UseReducer was exactly what I was trying to do with useState then.
Personally, I prefer to create those helper functions (toggleTodo, deleteTodo) instead of just sending the dispatch method down. Actions that are available can be more explicit than just exposing the entire dispatch method. Awesome tutorial series Kyle, thanks a bunch.
thanks! your ability to explain complex concepts and implement them effortlessly for us while walking through your thought process is insane. thank you for making these resources free
@@aammssaamm this is open source knowledge, you can find this information in the documentation and various articles online all he is doing is explaining it and "simplifying" it
Man! This helped me understood useReact much much better! Thank you so much!! Going to implement it into my current work. Can't wait to dive into your other vids!
This is an excellent video. I was going through a video guide on react (which was great) but once it got to reducers I got pretty confused. This is super helpful.
Well done sir! I've a few of your react vids to help understand and use react in a more powerful and organized way. Very generous of you and very appreciated!
Great explanation, took me a couple tutorials to understand why you use this hook rather then use.state, think i need to practice a little more with its use but really starting to get to grips with react, thanks!
Thank you very much, although I am Vietnamese, when I read materials on this issue in Vietnamese, I found it somewhat difficult to understand. But it's strange that when I watched your video in English, I understood it very clearly.
thanks sir its help a lot , i watch the tutorial on Traversy where you guess but been really confuse when you use useReducer there but watching it here its now crystal clear for me hehehe , thanks again
Thank you so much for these examples. I was confused by the React docs because I wasn't sure what types state and todo were supposed to be and am not familiar enough with typescript to understand the source code. Definitely learned within 20 minutes!
just for those who havent done much with switch or also people who are working with objects and having a hard time, the case its self is a function so you can do case ACTIONS.add:{ some logic in here, return new reducer value} i had a hard time figuring out how to manipulate objects, after a lot of trial and error i figured out this is how you could manipulate it case ACTIONS.add :{ state[payload.key]= payload.value; return {...state} } for some reason you have to return a clone of what ever you want to send back, something to do with sending it a shallow copy probably, but that works , manipulate state input locally within the case function and return clone of the state
Thank you so much for explaining how we pass one `dispatch` function instead of many different handlers. So far in the major project I'm working on, I've only see useReducer used for context providers, and nothing else. And I've seen several places where handleX, handleY, and handleZ are passed in. I think this could be useful to refactor.
The second example was a lot to take in but I think once I understand the design pattern, the whole concept becomes clear. Thank you for the great explanation
This is easily still the best introduction to useReducer. Clear, concise. Way better than some of the paid classes I attended.
You made it very easy kyle Thank you so much here is my learning from the above explanation:-
1.) UseReducer hook gives us an array of [state,dispatch] same as useState hook and use Reducer itself takes an reducer function , inital state.
2.) Whenver we runs an dispatch function the reducer function get's triggered and with the help of reducer function we can update new state.
3.) Reducer function takes 2 arguments which is the current state and action and the parameter action is used to write the logic based on the dispatch action type.
4.) Dispatch function takes an object (action) which contains two things action_type the action which we want to perform and also it takes payload which contains all the variables which we want to pass to over reducer function.
Once Again thank you so much Kyle for the great explanation.
That answers the question in my head : “why would I use useReducer while I have useState” because it’s always being compared to useState or explained with simple increment Function. Instead of saying they’re similar, saying that you can group multiple functions through conditions in a master function in order manage state in various ways, minimize prop drills and coming up with a simple todo app as you did was genious! Thanks man, I learn a lot from your tuts
Its the best react hooks series on the entire internet
amazing content, really impressed with your communication skills and how you break down things into understandable chunks
Can't believe I comeback to this video again after 1 year. I bumped with useReducer in a react project and relized I completely frogot about how it works.
Thank you again Kyle!!
Kyle - Thanks for these great videos. I actually ran into issue the other day at work and went back to one of your videos and articles I'm subscribed to and it helped me in getting that bug fixed. Keep up the good work, man!
This video is amazing. It's the best tutorial on useReducer I've seen! I love how easy it is to follow because you started with a really easy example by replacing useState with useReducer and then moved on to a more complex one with the todo app.
I spent like two days on a udemy course trying to understand this concept and the guy was WAY overcomplicating it and this video saved my life lol, someone from that course linked this video in the lecture comments and it's the ONLY way I got past that part of the course. THANK YOU
was that course : React the complete guide by maximillian?
Yup, same story for me. And yes, it was Max from Academind.
I left his course because of overcomplicating examples.. He is too fast and doesn't simplify things
Its actually insane how good you can explain what you are doing. Thank you so much :)
It helped me a lot to understand the Redux concept. well done.!
This tutorial is one of the most useful coding tutorials I've seen so far. Really happy with the way it's all being explained :)
This is basically redux, great stuff
This is my first stop whenever I have to learn a new concept in JavaScript...….thanks for simplifying the Web
Kyle, we really need a repo with all of these hooks examples to use them as reminder :)
Thank you for great tutorials!
we can make one
@@temzeks ok go make one ! :D
pls check Full React Course in description
@@zetaalpha3319 bruh.
Best react hooks tutorial
I agree
You have done such a fantastic explanation
🎉🎉🎉
I have watched Indian channels code with Harry thappa technical but I never understood
But yours explanation was best
GREATEST ONE AT ALL.
I was taking a course in 'UDEMY' and he was teaching useReducer but personally I didn't understand anything. This one was so helpful Thank you for your effort and for simplifying the web for us ^ ^ ;
BRO, you are GOD! Your explanation is so much better than in the Udemy course I'm taking.
Actually those who familiar with redux would find this more easier! Thank you for your lesson sir !
Man you're like 23y/o and knows more than a Senior developer 💯
is he Junior developer? 🤔
Senior developers know more about engineering in general. System Design, Data Structures, OOP, communication are all skills that senior devs will need to know. I know I'm going to catch so much hate for this.
@@RickyGarcia_Learning that is 100% correct, primarily system design and TONS of social skills that young people lack. Being a senior isnt only being able to program on your own, its being able to lead a team of devs, something young devs without much work experience will just lack. simplifies is really knowledgeable in the tech aspect tho for sure!
@@RickyGarcia_Learning Rawr! I hate you! Just kidding.
well, this is not senior level, this is React basics. don't get me wrong, I really like his videos, but you can't tell he knows more than a Senior developer just by looking at this video.
Best explanation out of four, I watched so far.
7:29 If you're already using Typescript, another alternative would be to define type as 'increment' | 'decrement'
Great tutorial Kyle . For beginners second to-do example might be difficult but dont give up try to understand today tomorrow until you get it and watch this video 2-3 times and read some articles on the internet.
You are like a saviour for React mankind. Loved your work, man!
Respect from Turkey. Your teaching skill is very good 🙂
I watched many videos about useReducer but this one cleared all my concepts about it
Kyle, you don't know how much time you've saved me for learning this hook.
Thank you for this. Your videos on hooks are the best videos I could find on TH-cam.
It's me again. I'm back to tell you how much this video helped me. You are the best !
Mate I've discovered your channel yesterday. I am not a frontend guy, but since yesterday I watched over 10 videos and bought one of courses which btw is flawless!! Love your presenting style and the content!! I have had senior guys in my teams that don't know 1/10th of the things you teach here!! And most importantly you cut to the chase, no BS!! Kudos and keep going!! Thanks for inspiring us!
Thank you so much for the support. I am glad I have been able to help.
small world dude
AND JUST LIKE THAT I learnt how to use useReducer. Short and informative video. Thanks man !
I never comment but this time i was impressed by how well you explain and your knowledge, you never disappoint.
A single video clears all the concepts
Not aware of your experience and others but me as a sr. developers find your videos quiet useful.
The best explanation on this planet so far.... Great Thanks
you have a special skill to explain everything on very simple examples, so you are making it impossible to not to understand.!!
1 Million tanks from Ethiopia
Super concise and informative. This is truly "simplified". Thanks a lot!
"The idea behind useReducer is it gives you a more concrete way to handle complex state so it gives you to set actions that you can perform on your state and it's going to convert your current state to a new version of the state based the action you send it."
It's so much easier if you know "why". Most documentations and tutorials often focus on "how" and that's annoying.
@@CastleShield Facts
Best explanation in the Internet. Great!!
Thank you so much Kyle, you’ve made me fall in love with React! I love the power of this hook!
I have always had an issue in wrapping my head around State Management. After watching this not only I got familiar but understood state management concepts in general. I was able read and implement Redux (In Production) after watching this. After seeing the benefits, I went ahead implemented state management in Angular(Akita) application(In Production). You should do another video on Redux with Redux Toolkit. It would benefit many people like me.
Clear, easy to understand and direct.
Just what I needed! Thanks man!
Can you please do a video on some flux design patterns with Context, useReducer, and async calls to an API? Im trying to replace Redux and Thunk with pure React hooks. Thank you for your videos!
Is it possible to completely replace redux with react hooks? like for global state management?
@@farhanvk7586 As far as I understand it, Redux creates a global store for your app, and there is no convenient way of doing that with just hooks. But you can capture some state in one component with useContext, and then import that state in any other component and use it there.
@@Andrewiththeaudi yes, if context API works then use it.
th-cam.com/video/lG6Z0FQj_SI/w-d-xo.html
This video gives a good explanation of context API and some other react tips.
you can replace redux by using useContext combined with useReducer i recomand you to watch codeEvolution channel to learn more about that ;)
amazing.. it was a very hard part of React for me, but now, it's crystal clear to me after watching Kyle's tutorial.
Thanks Brother.
Bro literally has best voice of any of these tutorials videos.
best video about reducer i've seen so far, many thx wds
Dude, useReducer just blew my mind. After building an app with more than 20 functions that update the state being passed around, just a useReducer would have been so much better. Great explanation Kyle! So much better than going through the pain of Redux while keeping the benefits of state management
I'm new to reducers and Redux but I don't understand why one needs Redux over useReducer
@@petiks6391 Redux scales really nicely. It is a better choice for bigger apps.
@@hugoperez1318 I see. Thank you
that's the most complicated and crazy hook iv'e seen so far
thanks!
I was confused about this hook and even some others but now I am clear and can use where it needs. So, going to watch the other tuts of hooks. Thank you very much for the clarification with a live example
exceptionally clear intro to this topic with a great example. thanks
Super helpful, reading the docs wasn't clicking for me. Thanks for taking the time to offer this!!
I love you man. Amazing explanation. Best react tutor ever
This is incredible. I'm pretty new to react. I once tried using useState for a complicated state and ended up abandoning the project lol. UseReducer was exactly what I was trying to do with useState then.
this is one of the best vids out there on the topic, thanks so much
Just wanna say - I've watched a few of your videos, and they've all been very useful, well explained and presented in a digestible manner.
Brilliant video for getting introduced to react useReducer hook. Thank you so much.
10000000000000000000000 likes for this explanation. Kudos!!
Personally, I prefer to create those helper functions (toggleTodo, deleteTodo) instead of just sending the dispatch method down. Actions that are available can be more explicit than just exposing the entire dispatch method.
Awesome tutorial series Kyle, thanks a bunch.
That's the right approach in my opinion... It makes the dumb component cleaner and keeps the logic in one place
same lol
woww just wowww!!!! you make things so damn easy. Thank you so much Kyle!
thanks a useReducer has never been more clear
thanks! your ability to explain complex concepts and implement them effortlessly for us while walking through your thought process is insane. thank you for making these resources free
first 2 minutes, and i can say the is the best explanation of useReducer
wonderful video , the second example just makes everything clear about useReducer
Your tutorials are so clean and informative, thank you for all the work you do!
Amazing lecture, Thank you :)
dude you are killing it with react tutorials
he copies them from other dudes
@@aammssaamm this is open source knowledge, you can find this information in the documentation and various articles online all he is doing is explaining it and "simplifying" it
@@azatecas no, he is copying other dev's videos made long time ago
@@aammssaamm can you link to another tutorial to contrast and compare the videos?
@@azatecas you can easily find them by searching unless you have no idea about how to LOL
You talk straight to the point, no bs around and great explanation :) love this channel
Man! This helped me understood useReact much much better! Thank you so much!! Going to implement it into my current work. Can't wait to dive into your other vids!
Thank you so much for making this demo. I went through the steps carefully and have a better grasp on the concept. This was a good demo.
that's probably the best explanation of react's useReducer Hook!! thank you very much for the simplification
your lecture's are exaptational and easy to understand, my only suggestion is please provide the Git code also
This is one of my favorite channels, thanks for everything
Can't thank you enough! This complicated theme is so much easy now after your explanation!
This is an excellent video. I was going through a video guide on react (which was great) but once it got to reducers I got pretty confused. This is super helpful.
After binging 3 of these in a row I'm pretty sure I'll be buying your course. You are a great teacher, awesome job!
Well done sir! I've a few of your react vids to help understand and use react in a more powerful and organized way. Very generous of you and very appreciated!
Great explanation, took me a couple tutorials to understand why you use this hook rather then use.state, think i need to practice a little more with its use but really starting to get to grips with react, thanks!
Thank you very much, although I am Vietnamese, when I read materials on this issue in Vietnamese, I found it somewhat difficult to understand. But it's strange that when I watched your video in English, I understood it very clearly.
thanks sir its help a lot , i watch the tutorial on Traversy where you guess but been really confuse when you use useReducer there but watching it here its now crystal clear for me hehehe , thanks again
@6:30 another nice way to create a symbol for like 'const INCREMENT = Symbol()' and same with the 'DECREMENT'
Awesome vid. I like the examples to help understand not just what it does but how to implement it.
Thank you so much for these examples. I was confused by the React docs because I wasn't sure what types state and todo were supposed to be and am not familiar enough with typescript to understand the source code. Definitely learned within 20 minutes!
just for those who havent done much with switch or also people who are working with objects and having a hard time, the case its self is a function so you can do case
ACTIONS.add:{ some logic in here, return new reducer value}
i had a hard time figuring out how to manipulate objects, after a lot of trial and error i figured out this is how you could manipulate it
case ACTIONS.add :{
state[payload.key]= payload.value;
return {...state}
}
for some reason you have to return a clone of what ever you want to send back, something to do with sending it a shallow copy probably, but that works , manipulate state input locally within the case function and return clone of the state
Basically... teach us react-redux without actually teaching react-redux. Great video and hook tutorial!
This was a very clear tutorial. Thank you very much.
I'm convinced this guy's an Web Developer Alien.. he's just perfect at everything including life.
Best useReduce( ) explanation !!!!
This is how fbp (function based programming) works
Kyle it would be great video to those who are learning resux or useReducer if you teach a fbp
Thank you, man. This is really web dev simplified.
Really a great class! I learned how to use it in the first 5 minutes following along :P Everything got much more clearer to me, thanks!
Thank you so much for making this video, it is so helpful.
Very helpful. Thanks for all the great React content! Some of the best I can find on the internet
Thanks bro! you're a beast of a coder and teacher
Kyle, thank you for these excellent videos. They are simple and quick. They are really helping. Again thank you for your great work. Love your videos
Thank you so much for explaining how we pass one `dispatch` function instead of many different handlers. So far in the major project I'm working on, I've only see useReducer used for context providers, and nothing else. And I've seen several places where handleX, handleY, and handleZ are passed in. I think this could be useful to refactor.
Great explanation. I really appreciate how you break it down even further with the examples. Helps explain the Hook better than the React Docs.
U R A GEM BROOO !!