Hope you enjoyed the video! I also have a really cool and unique course that will teach you way more than this video. You'll learn how to build an actual complex project with React. It's called "Project React" and you can find it at cosden.solutions/project-react. Also, I have a free weekly newsletter called "Import React" with tutorials, news, and cool stuff about React! You can sign up at cosden.solutions/newsletter?s=ytc
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..
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. 😊
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.
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.
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
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 }; }); };
You can call dispatch wherever you need to update multiple states at the same time for EX: if you have 3 actions and wanna call them inside a try-catch: try { const response = await ...
I think he just means that the intuitive way to use state is to have one state per value. You can indeed build something similar to the reducer pattern using state, but the way useReducer does things is well-established and predictable, so other engineers will know immediately how to work with your code. Reducers are easier to test and debug because they’re at a remove from the component, and it’s less fiddly to pass a single dispatch function around your component tree than it is a selection of setState wrappers.
Awesome video about the advanced useReducer hook.. Thanks for making understanding us. I expect more examples just to tell in video where this could be example so that decision to use becomes little more simple
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
Darius, This is great, Thank you so much for these contents you put out, i just joined the discord and i am excited about what you have on there, it is really mind blowing... I want to suggest if you can make a YT short video, to talk about sample scenarios when it's is suitable to use useReducer instead of useState. I feel this might clarify things better for Jr react devs like me. Thank you.
Thanks a lot! Generaly, I work with zustand state manager. And I see that I can use either useReducer or zustand to reach this result, right? Which one is better to use?
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...
im currently rewriting this complex ui that was using useState to useReducer. I was using array index to track items and React kept getting confused and not updating the correct item. now 3 days laters it still doesnt work. Glad to see React become the new jQuery. Front end sucks
Hi! kind of new here with Reducer. If I'm not wrong, while calling the dispatch function, it basically calls the reducer function, and takes the the "action"(2nd params) as the actual parameter by ignoring the "state"(1st params) by default. Is that correct?
I am unable to purchase the Project React. The message I receive is "Your payment could not be processed". I have written to the support team. There has been no response. Can you please help.
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!
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
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...
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
“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
The whole difference between other explanations is that Darius explains when and why to use it. If all you want to see is people typing useReducer then why watch this tutorial?
@@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
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}
Hope you enjoyed the video! I also have a really cool and unique course that will teach you way more than this video. You'll learn how to build an actual complex project with React. It's called "Project React" and you can find it at cosden.solutions/project-react. Also, I have a free weekly newsletter called "Import React" with tutorials, news, and cool stuff about React! You can sign up at cosden.solutions/newsletter?s=ytc
honestly, you're underrated. i learned more things from you than my college course.
Agreed. Definitely channel to recommend.
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..
I'm really glad to hear that! ☺️ thanks a lot
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. 😊
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!
Thank you so much Cosden! I've seen so many videos but it's just amazing how you are making this so simple.
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.
Damn, thanks! Means a lot 🤙
There is no other way to explain it easier than you did in this video... just mindblown :) Thanks for the video Cosden! 👏
glad to hear it!
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.
I've been binging your videos because you make it so easy to understand!! ❤️
Please keep up doing videos like that! Very concise and clear!
Will do!
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
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
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 };
});
};
You can call dispatch wherever you need to update multiple states at the same time for EX:
if you have 3 actions and wanna call them inside a try-catch:
try {
const response = await ...
dispatch({ type: "SET_ACTION_1" });
dispatch({ type: "SET_ACTION_2", payload: ... });
dispatch({ type: "SET_ACTION_3", products: ... });
} catch (error) {
dispatch({ type: "SET_ACTION_1_ERROR", message: "Error on action 1" });
console.log ...
}
};
I think he just means that the intuitive way to use state is to have one state per value. You can indeed build something similar to the reducer pattern using state, but the way useReducer does things is well-established and predictable, so other engineers will know immediately how to work with your code. Reducers are easier to test and debug because they’re at a remove from the component, and it’s less fiddly to pass a single dispatch function around your component tree than it is a selection of setState wrappers.
Thank you so much! Your channel will grow lots with your great, clear, and concise explanations!
Super clear and explanation again, the last example drove home the point on when to use it
Yep, I really don't need to see another tutorial on useReducer, yours is enough!
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❤
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😅🥰
Awesome video about the advanced useReducer hook..
Thanks for making understanding us.
I expect more examples just to tell in video where this could be example so that decision to use becomes little more simple
THE GOAT - Greatest Of All Teachers 🔥🐐
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
Yep exactly, that's actually what redux is! So you may want to consider it if your state is big enough
Darius, This is great,
Thank you so much for these contents you put out, i just joined the discord and i am excited about what you have on there, it is really mind blowing...
I want to suggest if you can make a YT short video, to talk about sample scenarios when it's is suitable to use useReducer instead of useState.
I feel this might clarify things better for Jr react devs like me.
Thank you.
The best explanation I've ever heard. I wish the best from Ukraine
Great video as always
The 12:18 explains it.❤
Thanks a lot! Generaly, I work with zustand state manager. And I see that I can use either useReducer or zustand to reach this result, right? Which one is better to use?
Very depends on the complexity of your project or feature. Simple = useState, medium = useReducer, hard = contextAPI, hardcore = zustand or redux
I'm really greatefull to you for making video like these.......
By far underrated
Great explanation.
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...
all my handles are the same as this one, @cosdensolutions
Thanks for the video - was great - which pattern would you use to switch a theme in react?
Very clearly explained. Thanks for making this . Subscribed.
Great video! You helped me a lot. Thank you
Such a great tutorial! Thank you and just subscribed :)
I heard a simple rule of thumb saying to useReducer() when updating objects in the state and useState() when updating simple, primitive variables.
perfect master😍😍
voy aprendiendo y tambien me voy enamorando jajajajajajajajajajajajajaja muchas gracias🌹
mi crush de react, amor al primer video 😍 jajajjajjaja
thank you so much for the explanation!
All things Simply Explained exactly.
Your explanation is fcking amazing.
hi,
great tutorial
what is this browser you used in this tutorial
what vscode theme do you use?
Please try to do series on storybook, react testing and typescript
im currently rewriting this complex ui that was using useState to useReducer. I was using array index to track items and React kept getting confused and not updating the correct item. now 3 days laters it still doesnt work. Glad to see React become the new jQuery. Front end sucks
Really great video
Hi!
kind of new here with Reducer.
If I'm not wrong, while calling the dispatch function, it basically calls the reducer function, and takes the the "action"(2nd params) as the actual parameter by ignoring the "state"(1st params) by default. Is that correct?
I remember again why I use Vue 😄
Just great !!!
Video on RTK query?
you earned my subscribe (Y)
Thank you!
I am unable to purchase the Project React. The message I receive is "Your payment could not be processed". I have written to the support team. There has been no response. Can you please help.
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!
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
Really Good
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...
useReducers looks like the complicated version of useState..what am i missing? lol
It is hahah but it's useful when you have complicated state and want to handle it predictably
Awesome
thanks
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
You are right,,,he does not teach he just comment on code
“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
I watched and I understand, there is no problem on the tutorial
The whole difference between other explanations is that Darius explains when and why to use it. If all you want to see is people typing useReducer then why watch this tutorial?
Bro ,we need beginners react project
YOO chico
it would be better if you did not used typescript
They're right its painful to follow. The way you explain things is not begginer friendly. I think you should explain while coding line by line.
I think these are some of the best descriptions of react hooks I’ve ever watched.
I dont get it, pretty complex
I'm Jewish
i'll never understand this stupid hook 😢
yes, you will, you just watched my video! ☺️
@@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
trust me i know how u feel, but dont give up , im not giving up untill i master this shit !
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}
Glad it was helpful!
Excellent
Thanks