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
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.
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!!
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
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
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.
His way of explanation is filled with soo much confidence and experience, at times it gives me a feeling that its him, who has introduced a particular technology into the software industry. Be it the explanation of ANY framework/library/Programming language..etc . you try to learn from him. Pure Amazing work Kyle. You're the best tutor I've come across the whole internet who explains stuffs in such a simplified manner.❤👏
yeah i do question sometimes, dafuck he does all day, reads the documentation? seems impossible to know so well some stuff he shows, especially since some of it is barely out yet.
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!
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
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 ^ ^ ;
"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."
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.
Even if my native language is German and not English, you explain React in such great quality that it is an ease for me to understand all of these concepts, thanks Kyle!
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. ua-cam.com/video/lG6Z0FQj_SI/v-deo.html This video gives a good explanation of context API and some other react tips.
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.
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
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
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 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!
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.
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.
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, 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!
Fantastic explanation and easy to follow! I only wish that we'd go into then writing tests at the end, as that will differ between just using useState and useReducer as well as it will get us thinking of how we structure our code so it's easier to test.
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!
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!
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
@@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
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.
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.
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!!
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
amazing content, really impressed with your communication skills and how you break down things into understandable chunks
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!
Its the best react hooks series on the entire internet
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.
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.
It helped me a lot to understand the Redux concept. well done.!
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
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
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.
Its actually insane how good you can explain what you are doing. Thank you so much :)
This is my first stop whenever I have to learn a new concept in JavaScript...….thanks for simplifying the Web
Actually those who familiar with redux would find this more easier! Thank you for your lesson sir !
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 :)
His way of explanation is filled with soo much confidence and experience, at times it gives me a feeling that its him, who has introduced a particular technology into the software industry. Be it the explanation of ANY framework/library/Programming language..etc . you try to learn from him. Pure Amazing work Kyle. You're the best tutor I've come across the whole internet who explains stuffs in such a simplified manner.❤👏
yeah i do question sometimes, dafuck he does all day, reads the documentation? seems impossible to know so well some stuff he shows, especially since some of it is barely out yet.
I watched many videos about useReducer but this one cleared all my concepts about it
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 have a special skill to explain everything on very simple examples, so you are making it impossible to not to understand.!!
Best explanation out of four, I watched so far.
BRO, you are GOD! Your explanation is so much better than in the Udemy course I'm taking.
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
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
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 ^ ^ ;
"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
Kyle, you don't know how much time you've saved me for learning this hook.
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.
Not aware of your experience and others but me as a sr. developers find your videos quiet useful.
Even if my native language is German and not English, you explain React in such great quality that it is an ease for me to understand all of these concepts, thanks Kyle!
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.
ua-cam.com/video/lG6Z0FQj_SI/v-deo.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 ;)
Super concise and informative. This is truly "simplified". Thanks a lot!
Bro literally has best voice of any of these tutorials videos.
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.
A single video clears all the concepts
Respect from Turkey. Your teaching skill is very good 🙂
This is basically redux, great stuff
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
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
Thank you for this. Your videos on hooks are the best videos I could find on UA-cam.
Best react hooks tutorial
I agree
your lecture's are exaptational and easy to understand, my only suggestion is please provide the Git code also
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
Thank you so much Kyle, you’ve made me fall in love with React! I love the power of this hook!
that's the most complicated and crazy hook iv'e seen so far
thanks!
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.
I never comment but this time i was impressed by how well you explain and your knowledge, you never disappoint.
You are like a saviour for React mankind. Loved your work, man!
exceptionally clear intro to this topic with a great example. thanks
Clear, easy to understand and direct.
Just what I needed! Thanks man!
7:29 If you're already using Typescript, another alternative would be to define type as 'increment' | 'decrement'
It's me again. I'm back to tell you how much this video helped me. You are the best !
Your tutorials are so clean and informative, thank you for all the work you do!
AND JUST LIKE THAT I learnt how to use useReducer. Short and informative video. Thanks man !
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
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.
Super helpful, reading the docs wasn't clicking for me. Thanks for taking the time to offer this!!
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!
Brilliant video for getting introduced to react useReducer hook. Thank you so much.
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
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!
The best explanation on this planet so far.... Great 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.
I'm convinced this guy's an Web Developer Alien.. he's just perfect at everything including life.
thanks a useReducer has never been more clear
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.
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.
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.
You talk straight to the point, no bs around and great explanation :) love this channel
wonderful video , the second example just makes everything clear about useReducer
1 Million tanks from Ethiopia
that's probably the best explanation of react's useReducer Hook!! thank you very much for the simplification
Best explanation in the Internet. Great!!
I found it interesting that you imported the ACTIONS object instead of passing it down as props.
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!
Fantastic explanation and easy to follow! I only wish that we'd go into then writing tests at the end, as that will differ between just using useState and useReducer as well as it will get us thinking of how we structure our code so it's easier to test.
best video about reducer i've seen so far, many thx wds
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!
Can't thank you enough! This complicated theme is so much easy now after your explanation!
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 one of the best vids out there on the topic, thanks so much
Thank you! took my professor 2 hours to deliver the same info
Great explanation. I really appreciate how you break it down even further with the examples. Helps explain the Hook better than the React Docs.
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
Awesome vid. I like the examples to help understand not just what it does but how to implement it.
Thank you for putting everything together in such a short example, good work as always Kyle.
Just see how smooth you go while you code gives me inspiration to emulate :)
This is one of my favorite channels, thanks for everything
This was a very clear tutorial. Thank you very much.
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
first 2 minutes, and i can say the is the best explanation of useReducer
10000000000000000000000 likes for this explanation. Kudos!!
@6:30 another nice way to create a symbol for like 'const INCREMENT = Symbol()' and same with the 'DECREMENT'
I love you man. Amazing explanation. Best react tutor ever
clear, concise and concrete
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 kindly and clearly explaning this hook
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!