Learn React Hooks: useReducer - Simply Explained!

  Переглядів 40,154

Cosden Solutions

Cosden Solutions

День тому

Join The Discord! → discord.cosdensolutions.io
Source Code → github.com/cosdensolutions/co...
In this video we will learn about React hooks, starting with useReducer. This powerful React hook will allow you to enhance how you manage and mutate state in your React application. You will learn the difference between useReducer and useState, how to create your reducer function, how to define your actions and return a mutated copy of the state in your application.
In this new React world, hooks are here to stay, so it's best to learn them! In this tutorial I demonstrate the useReducer React hook, and I explain it very simply and in a way that is easy to understand. Enjoy!

КОМЕНТАРІ: 61
@catarinasilva7390
@catarinasilva7390 9 місяців тому
Dude, you are soooo underrated. 600 views? this video deserves a million views. can't even tell you how many different videos i watched about useReducer and finally you found a way to explain it perfectly. Finally got it 🙏🙏 thank you thank you thank you..
@cosdensolutions
@cosdensolutions 9 місяців тому
I'm really glad to hear that! ☺️ thanks a lot
@forshetrial
@forshetrial Місяць тому
honestly, you're underrated. i learned more things from you than my college course.
@es7729
@es7729 Місяць тому
Agreed. Definitely channel to recommend.
@JasonRosensweig
@JasonRosensweig 7 місяців тому
I just want to say that these react hooks videos are by far the best and easiest to understand. They are fantastic for new devs and senior devs just getting into react. 😊
@brunobrasil3419
@brunobrasil3419 7 днів тому
Thank you so much! Your channel will grow lots with your great, clear, and concise explanations!
@tanmayawasthi6487
@tanmayawasthi6487 2 місяці тому
Thank you so much Cosden! I've seen so many videos but it's just amazing how you are making this so simple.
@WaffleStompz
@WaffleStompz 9 місяців тому
This series on React hooks has been super informative. Really appreciate this content, these may be the best explanation videos I have ever watched, for any language.
@cosdensolutions
@cosdensolutions 9 місяців тому
Damn, thanks! Means a lot 🤙
@user-zu2zn6rd3n
@user-zu2zn6rd3n 7 місяців тому
There is no other way to explain it easier than you did in this video... just mindblown :) Thanks for the video Cosden! 👏
@cosdensolutions
@cosdensolutions 7 місяців тому
glad to hear it!
@christopherlopez2491
@christopherlopez2491 23 дні тому
I feel like I just made it over a slump/ hurdle I’ve been stuck in for too long. But seriously… you’re videos have been SO helpful is getting over these hang ups. I appreciate what you’re doing here.
@magiclover9346
@magiclover9346 2 місяці тому
It's important to understand the strictness of immutability is enforced. If you don't return a new object in your reducer the component will not re-render. This is a bit different if you're coming from redux-toolkit. Redux toolkit will give you a brand new object in your reducers. Great video
@evgenystarinsky8582
@evgenystarinsky8582 9 місяців тому
Please keep up doing videos like that! Very concise and clear!
@cosdensolutions
@cosdensolutions 9 місяців тому
Will do!
@lovechayennelove
@lovechayennelove 4 місяці тому
Such a great tutorial! Thank you and just subscribed :)
@johnacsyen
@johnacsyen 6 місяців тому
Very clearly explained. Thanks for making this . Subscribed.
@mahmoudwalid1703
@mahmoudwalid1703 16 днів тому
Your content is really very useful. Easy and simple. It makes it easy for me 🥰🥰🥰 The way you explain is very similar to Jonas Schmedtmann😅🥰
@pumpkinlyla7287
@pumpkinlyla7287 6 місяців тому
thank you so much for the explanation!
@adussa3
@adussa3 22 дні тому
Thank you for explaining things so clearly! I finally understand the useReducer now! I do have one question. Around 12:19 you mentioned that "[useReducer] can update multiple pieces of state at once. If we had done this with useState, you probably would have had a state value for count and then a state value for error" I'm a little confused about what you meant by this. Are you saying that you would need two separate states for count and error? Couldn't we have a state that holds an object with both count and error values and do the same thing in the useReducer example, like this: const [state, setState] = useState({ count: 0, error: null }); const increment = () => { setState((prevState) => { const newCount = prevState.count + 1; const hasError = newCount > 5; return { ...prevState, count: hasError ? prevState.count : newCount, error: hasError ? "Maximum reached" : null }; }); }; const decrement = () => { setState((prevState) => { const newCount = prevState.count - 1; const hasError = newCount < 0; return { ...prevState, count: hasError ? prevState.count : newCount, error: hasError ? “Minimum reached" : null }; }); };
@ask43242flight
@ask43242flight 8 місяців тому
Thank you!
@anavashagashvili3308
@anavashagashvili3308 2 місяці тому
Great video! You helped me a lot. Thank you
@es7729
@es7729 Місяць тому
1:28 to 1:48, just summarization and I already got what it does. I did not use it really, but used redux, so it absolutely made sense. Thanks!
@boukabousfarid1756
@boukabousfarid1756 4 місяці тому
even my english is very bad but i can understand evry word you saying , and that's help me to get the information , thanks bro❤
@erfelipe
@erfelipe 27 днів тому
Great explanation.
@harag9
@harag9 6 місяців тому
Great video. I've watched several vids trying to explain useReducer, and each time a little more sinks in, I just have to go and use it. It looks so simple when it's all on one page within one component. but when I have several pages and several components, and then need to throw it into a useContext or something for it to be accessible to them all
@cosdensolutions
@cosdensolutions 6 місяців тому
Yep exactly, that's actually what redux is! So you may want to consider it if your state is big enough
@nanonkay5669
@nanonkay5669 Місяць тому
I think if you find yourself having to update 4+ instances of state that all depend on each other in some capacity, its time to use useReducer
@maxkalashnyk3378
@maxkalashnyk3378 Місяць тому
The best explanation I've ever heard. I wish the best from Ukraine
@leonardmbibi8013
@leonardmbibi8013 7 місяців тому
I first of all like your video before watching - that tells you the confidence I have in you. I'll follow you on social media if you make your handles available and more...
@cosdensolutions
@cosdensolutions 7 місяців тому
all my handles are the same as this one, @cosdensolutions
@abdulkhaleque9363
@abdulkhaleque9363 2 місяці тому
I'm really greatefull to you for making video like these.......
@maso4u
@maso4u 9 місяців тому
Really great video
@fatheymohamed140
@fatheymohamed140 5 місяців тому
hi, great tutorial what is this browser you used in this tutorial
@michaeltrembovler8301
@michaeltrembovler8301 6 місяців тому
Just great !!!
@MohammedShibincp
@MohammedShibincp 8 місяців тому
Really Good
@sayf3446
@sayf3446 10 місяців тому
Nice explanation! Really enjoyed that :) May I ask if you can do videos on implementing Typescript + React in Clean Architecture/DDD? These topics and specific tech stack are very few in this space, and would be valuable to junior devs who join bigger teams...tq! Hope to join the discord soon!
@cosdensolutions
@cosdensolutions 10 місяців тому
Glad you liked it! I'm actually building an app live from scratch where I talk about these things, you can check it out! The first video is posted already. I'll eventually make more specific content around that too but for now there's the live where it's an actual project
@ranjaysingh919
@ranjaysingh919 7 місяців тому
All things Simply Explained exactly.
@ravikanna1837
@ravikanna1837 5 місяців тому
Please try to do series on storybook, react testing and typescript
@thebeastsclips
@thebeastsclips 5 місяців тому
The 12:18 explains it.❤
@pame187
@pame187 3 місяці тому
voy aprendiendo y tambien me voy enamorando jajajajajajajajajajajajajaja muchas gracias🌹 mi crush de react, amor al primer video 😍 jajajjajjaja
@VishalSharma-rn7mt
@VishalSharma-rn7mt 4 місяці тому
Awesome
@thekadirgun
@thekadirgun 4 місяці тому
I remember again why I use Vue 😄
@kiwi..._
@kiwi..._ 8 місяців тому
Bro ,we need beginners react project
@capt_vj
@capt_vj 2 місяці тому
Video on RTK query?
@Psychopatz
@Psychopatz 5 місяців тому
I'm a visual learner, and him murmuring about the technicalities and jargon instead of showing it then explaining what he did makes this tutorial painful to follow yet its still sufficient, ty
@Imam.Mehdi_
@Imam.Mehdi_ 5 місяців тому
You are right,,,he does not teach he just comment on code
@OjayMatuso
@OjayMatuso 3 місяці тому
“Learning styles” are a myth.There’s no such a thing as visual learning. Differences in IQ is what determines the difficulty of learning. You’re just slow bro
@anonysmooth648
@anonysmooth648 2 місяці тому
I watched and I understand, there is no problem on the tutorial
@iamparmjeetmishra
@iamparmjeetmishra 11 днів тому
thanks
@crutz3064
@crutz3064 5 місяців тому
useReducers looks like the complicated version of useState..what am i missing? lol
@cosdensolutions
@cosdensolutions 5 місяців тому
It is hahah but it's useful when you have complicated state and want to handle it predictably
@2011BIRR
@2011BIRR 6 днів тому
very nice! But as a teacher it is also good to speak a little slower...that would be my wish. I ´ve seen lots of tube videos, where guys think to be clever and don´t think about pupils learning and bombard with talking...
@mohammadamaan9254
@mohammadamaan9254 5 місяців тому
it would be better if you did not used typescript
@avatar7166
@avatar7166 7 місяців тому
i'll never understand this stupid hook 😢
@cosdensolutions
@cosdensolutions 7 місяців тому
yes, you will, you just watched my video! ☺️
@avatar7166
@avatar7166 7 місяців тому
@@cosdensolutions ive watched tons by many different great channels and still makes no sense to me i understand the use of it but not the structure of it
@voldemortvi4264
@voldemortvi4264 7 місяців тому
trust me i know how u feel, but dont give up , im not giving up untill i master this shit !
@Pareshbpatel
@Pareshbpatel 6 місяців тому
The useReducer hook, so clearly and succintly explained. Thank you very much. PS One of the few Tutors to illustrate React with TypeScript code. You have to be commended for that. {2023-10-18}
@cosdensolutions
@cosdensolutions 6 місяців тому
Glad it was helpful!
Learn React Hooks: useImperativeHandle - Simply Explained!
9:54
Cosden Solutions
Переглядів 15 тис.
Learn React Hooks: useLayoutEffect - Simply Explained!
9:17
Cosden Solutions
Переглядів 14 тис.
Що рятує українців від похмілля?😁 | #НовийКанал #ЄПитання
00:53
єПитання з Лесею Нікітюк
Переглядів 428 тис.
Learn useReducer In 20 Minutes
20:12
Web Dev Simplified
Переглядів 483 тис.
Every CSS Animation property
9:26
chunkydotdev
Переглядів 44 тис.
useReducer is BETTER than useState | React Hook useReducer Tutorial
15:57
You Are Using useEffect Wrong
14:40
Cosden Solutions
Переглядів 28 тис.
State Managers Are Making Your Code Worse In React
13:33
Web Dev Simplified
Переглядів 137 тис.
You might not need useEffect() ...
21:45
Academind
Переглядів 132 тис.
This is the Only Right Way to Write React clean-code - SOLID
18:23
CoderOne
Переглядів 615 тис.
Learn React Hooks: useRef - Simply Explained!
12:42
Cosden Solutions
Переглядів 71 тис.