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
This could be the best useMemo tutorial I've seen. And I've seen a lot. Almost too many. 😂 Oh, and I love that you keep rounding 29.999.999 to 29 million. Made me chuckle every time... 🤗🤗
As someone still new to react and web dev in general, this is awesome, the main hooks I’ve been using have been useState and useEffect. Would be great to see one about useRef too :)
Im enrolled in a couple of intermediate and advanced react courses.. even bought a couple of books.. But man, your vids are waaay better and so amazing! clear and concise!!!! i wish you had a full on intermediate/advanced react course. i would gladly pay for that! Thank you so much for existing!!!
I'm just about to launch a course that has 2 parts. The first part is more beginner, the second is more intermediate/advanced ☺️ if you get it when it launches you get both for the price of one
No one has ever articulated this topic so well. Because it's simple yet confusing. Also I was tired of watching premium full blown course about shopping cart app with tailwind and what not, all to explain the few key concepts hardly for 5 mins which eventually gets buried somewhere in the middle. Thanks for the short and sweet content.
Hey, i really like your way of explaining. I bought an online course on React, but sometimes I just don't get it on the course, and your videos make it super duper clear for me. Thank you for your job, wish you all the best, and I hope some day you are going to have 500k subs on youtube.
thank you for the kind words! I'm also working on a course by the way, will have this teaching style and a really well thought out plan that I haven't seen done in another course before! Coming in a couple of months
It was great. I didn't understand useMemo while I had read many articles about it but this video was very useful. now I know its logic and usage. Thank you
thank god i stumbled upon your channel..i am learning about all the hooks that react has to offer through your channel..i am loving the clear explanations that you provide..not a single dull moment in the video! kudos to you sir! love you!!!
Hi sir, I am grateful that I landed here and learn some valuable concepts of useMemo, I have a question that on 11:30 minute you added the count as a dependency array, now when a count changes that computation will run again, then how the usememo is beneficial here, let me know please?
The useMemo is not to prevent a re-render, but rather control when it happens. In that example we did indeed invalidate what we did by adding count, however that's necessary. Our memo depended on count so we had to provide it. The benefit lies when we add a new state variable that is not related to that, then useMemo won't re-render when that changes. So again, we're not trying to prevent a re-render, but rather control when it happens and only have it happen when absolutely necessary, otherwise return the memoed value
Thanks for this video 👍👍👍 really good way that you explain . I am lazy person who understand only if simplify way to explain of context and you did it 😜🤗. Good job..!😊
I would only use it when there's an expensive computation to make, or when I want to prevent this from causing a expensive child component to re-render
Hi, your way of teaching is very easy to understand and helps me learn more concepts. Please make a video on Reactjs Forms as well.. it would really help me understand forms better. Thanks for making learning so easy and effective.
For all the new react developers watchng this video, you wont need usememo, usecallback, and memo hooks again. React now has it's own compiler which will do this for you automatically.
yes but good luck finding a job where they use cutting edge React. Even after 19 useMemo will still be important. It'll be a while before it truly goes away
all your video is awesome keep it up ,make small project which make use of the all hooks how to use in company level or share some difficult situation of it when to use which hooks use it will be great help
Great videos. 1 question though, when you have count and items in the hook, why doesn't that lag as it seems like the items are being looped each time count changes?
Hey cosden, we can achieve the similar results using useEffect ? so how do we identify when should we use memo ? // Use effect equivalent: import { useState, useMemo, useEffect } from "react"; import { data } from "./utils/data"; const Counter = () => { const [arr] = useState(data); const [selectedValue, setSelectedValue] = useState(0); useEffect(() => {
So while your example works, it's not the recommended approach. The way you have it, you have an extra state variable that you have to manage and a whole useEffect to manage it. If you do it like I showed in useMemo, then selectedValue automatically gets re-computed when the array changes, and you don't have to do it yourself. That's why it's a better approach. There are a lot of times where something shouldn't be done with an useEffect even if it can, just because it introduces an extra dependency you have to manage and keep up to date. Also, your example creates an extra render cycle in the component which is unnecessary
How can we realize potential performance optimizations not just from a noticeable UI issue, but from the browser or React DevTools? Would love a similar video to this that discusses seeing the issue in the devtools and fixing it afterwards in order for us to understand how to properly debug performance issues like this.
Really great video. I have few questions if u don't mind. What are the differences between useMemo and useEffect ? Not talking about syntax or the option return function. Instead of using useMemo in this case, you can use useEffect and put items as dependencies. useEffect(()=> {selectedItems = item.find(item=> item.id)}, [items]}) Re-computation only triggered once items is changed, and instance is destroyed to create a new one right? Same as useMemo? So why useMemo instead of useEffect? Is it linked to memory usage or am i missing something? Thank you
Hi, I’m new to react and your videos are really helpful. I have two questions: 1. In the last specific scenario, is it really necessary using useMemo? I mean, the only cause of rerender is when count changes, so useMemo would compare every render the dependecies. 2. What is the differences between useMemo and useCallback?
1. In the context of the video, no it isn't. But the goal was to show you how it works! 2. useMemo returns a value, useCallback returns a function. They are the same otherwise!
useMemo works on the memoization concept. That means it stores the result of a function call based on the parameters passed, ex. a sum function where you pass 2 and 2, it will always return 4, so it will store that if you pass 2 and 2 it will directly return 4 instead of actually calculating 2 + 2. useEffect just simply runs on re-render
do you still need useMemo for the case with === count? what is the sense of useMemo in this case if selectedItem should be recalculated when you click the button? prevent recalculation when page is rerendered, but items and count are same?
Great Explanation, thank you. I have 1 doubt. If I use useState to store the value of selected items and changed its value only when there is change in the dependency array of the useEffect hook, then will it produce the same result? If yes then what is the difference between the two ? function Demo({}: DemoProps) { const [count, setCount] = useState(0); const [selectedItem, setSelectedItem] = useState(0); const [items] = useState(initialItems); useEffect(() => { const temp = items.find((item) => item.id === count) setSelectedItem(temp) }, [items])
So first of all in your example you're missing `count` in your dependency array. You want that useEffect to run as count changes, as well as when items changes. Second of all, that code is equivalent, but now you have an extra piece of state + the hook that keeps it in sync. The way I showed in the video is better because the "sync" happens automatically. That approach is better because it has less code (one less hook) and less responsibility (selectedItem is auto updated through `useMemo` without manually having to do anything) So you're basically doing the same work, just with extra dependencies, which isn't ideal 😁 best to keep things simple and automatic
But when you add count to the use memo dependency array, are you not now doing the find again on every click? Oh I guess this isn't a long running task now as its not searching through the whole array any more. But, doesn't that negate the reason to add useMemo in the first place?
Yep it does, but that's what you want. You don't want to prevent a re-compute, but rather control when it happens. You need the count to perform that operation so there's no way around it. However if you added a new state variable and changed that, then it wouldn't re-compute. It would without useMemo. That's the goal, to control and only when needed re-calculate!
Yes it does. The goal isn't to make things never change, but rather control when they change and prevent unnecessarily changing. Of course this code here is slow by default, I did that to show you useCallback and how it works. In this case, if you have to use count and that causes a problem, then maybe it's time to rethink the component and move some things around to avoid that
You can use an object or a Map for items where the keys are the ids. This would allow you to look up items in constant time (O(1)) by simply accessing the item via its id.
What is the difference between useMemo and useEffect? If we wrap the selectedItem function inside a useEffect like- useEffect( ( )=>{ const selectedItem=items.find((item)=>item.isSelected) },[items ] ) then it's serving the same purpose.
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
Please add also NextJS to the Project React Course 🙂
This was my first and the last useMemo tutorial. I just loved the way you isolated the concept along with a really simple explanation. Thank you!
Timing the "like and subscribe" popup exactly after you explain the solution is genius. I clicked like and it felt good I don't know why lol
Done thanks clear
6:50 useMemo memoizes the result of a calculation/ function call until some dependencies change
This could be the best useMemo tutorial I've seen. And I've seen a lot. Almost too many. 😂 Oh, and I love that you keep rounding 29.999.999 to 29 million. Made me chuckle every time... 🤗🤗
As someone still new to react and web dev in general, this is awesome, the main hooks I’ve been using have been useState and useEffect. Would be great to see one about useRef too :)
It's coming! Just started this 😁
So articulate and concise. God bless you
I've been struggling with this concept, but this video really made it easy and simple to understand. Many thanks!
glad it helped! 🤙
I am so happy that I got landed to this channel. So concise, loving it.
Perfectly explained.. Simple, Clear and Straightforward.. ThankS
Im enrolled in a couple of intermediate and advanced react courses.. even bought a couple of books.. But man, your vids are waaay better and so amazing! clear and concise!!!! i wish you had a full on intermediate/advanced react course. i would gladly pay for that!
Thank you so much for existing!!!
I'm just about to launch a course that has 2 parts. The first part is more beginner, the second is more intermediate/advanced ☺️ if you get it when it launches you get both for the price of one
Will be sure to do so!! thank you! :D @@cosdensolutions
No one has ever articulated this topic so well. Because it's simple yet confusing. Also I was tired of watching premium full blown course about shopping cart app with tailwind and what not, all to explain the few key concepts hardly for 5 mins which eventually gets buried somewhere in the middle. Thanks for the short and sweet content.
The best useMemo explanation I've seen.
Thank you. You are a great teacher and presenter!
bro you are a react monster
Hey, i really like your way of explaining. I bought an online course on React, but sometimes I just don't get it on the course, and your videos make it super duper clear for me. Thank you for your job, wish you all the best, and I hope some day you are going to have 500k subs on youtube.
thank you for the kind words! I'm also working on a course by the way, will have this teaching style and a really well thought out plan that I haven't seen done in another course before! Coming in a couple of months
Very clean explanation! Thank you!
This guy is the best teaching react stuff
Man this video is gold! Thank you! Your useEffect video is also the best I've seen. Now I've decided that I'm gonna watch all your videos!
After watching 3 of your videos I have learned more than reading 3 books on React. Your videos are exceptionally clear. Thanks
Loving your breakdown of the react hooks. thanks for sharing
Finally understand this hook after lot of stuggle !!
It was great. I didn't understand useMemo while I had read many articles about it but this video was very useful. now I know its logic and usage. Thank you
Great tutorial! Thank you! I feel confident using useMemo now!
Best explanation ever. understand in one go.
You have the best tutorials channel 🙌🙌🙌🙌
Wow... perfectly explained man, Thanks.
thank god i stumbled upon your channel..i am learning about all the hooks that react has to offer through your channel..i am loving the clear explanations that you provide..not a single dull moment in the video! kudos to you sir! love you!!!
Thank you so much for this lecture.
Ohhh mannn. Why are you so good at teaching? Thank you so much!!!
You're most welcome ☺️
Thank you very much for the easier explained concepts. I'm watching your videos to understand my lessons better. Both compliment each other well.
wonderful!
Hi sir, I am grateful that I landed here and learn some valuable concepts of useMemo, I have a question that on 11:30 minute you added the count as a dependency array, now when a count changes that computation will run again, then how the usememo is beneficial here, let me know please?
The useMemo is not to prevent a re-render, but rather control when it happens. In that example we did indeed invalidate what we did by adding count, however that's necessary. Our memo depended on count so we had to provide it. The benefit lies when we add a new state variable that is not related to that, then useMemo won't re-render when that changes.
So again, we're not trying to prevent a re-render, but rather control when it happens and only have it happen when absolutely necessary, otherwise return the memoed value
Thank you for explaining these concepts so simply! Love your videos.
Very good explanation 👍🏽
It's definitely the best explanation I've ever seen. Thank you very much!
Made me rethink the way I was seeing this hook. Thanks
Great explanation! Thank you
Thanks for this video 👍👍👍 really good way that you explain .
I am lazy person who understand only if simplify way to explain of context and you did it 😜🤗. Good job..!😊
that is the perfect fundamentals . it was very efficient to understand the how important useMemo . thx :)
Glad you found it useful! 🤙
the best video explains useMemo!! thank you so much!
Love your explanations, you have made react a lot simpler.
you are THE BEST to explain!
Really its a Last Usememo video for me🥰🥰🥰
Really useful tutorial. Thanks for being so helpful!
dude you're awesome. Thank you so much for your explanations, now I guess I don't need to watch other videos about react hooks :)
☺️
I like your tutorial very short and will explain.
Thank you so much 😊😊
Thank you for your clear explanation ❤
this was a perfect explanation - thank you!
Thanks, this is very helpful!
So simply explained! wow, amazing
every tutorial of cosden solution is last tutorial ur gonna watch - Fr ✌✌
the most clear explanation!
Amazing amazing amazing explanation bro . ♥️♥️♥️♥️♥️. Plss do a javascript series also
that was very helpful, thank you for clearing the confusion
Simply explained indeed, Thank you.
Thanks, Alot Man. Glad i picked your video first now i don't need to watch another video on this.
🤙
Best tutorial for useMemo!
Great video, thanks for this, I'll have to look at implementing this now.
Really well explained, thank you. Also mind dropping a list of most common cases that you would use useMemo for?
I would only use it when there's an expensive computation to make, or when I want to prevent this from causing a expensive child component to re-render
Hi, your way of teaching is very easy to understand and helps me learn more concepts. Please make a video on Reactjs Forms as well.. it would really help me understand forms better. Thanks for making learning so easy and effective.
Great video I just begin my react js journey and can easily understand the concept
So good! You explained it perfectly!
Wonderful !! 👏 I subscribe right away !
so useMemo is fairly similar to useEffect? but useEffect is called when the page is loaded and/or for some dependencies?
Nice tutorial, thanks!
Nice explanation, appreciate that. Btw dude how do you spam that fast!
Great explication bro. Thank you very much
For all the new react developers watchng this video, you wont need usememo, usecallback, and memo hooks again. React now has it's own compiler which will do this for you automatically.
yes but good luck finding a job where they use cutting edge React. Even after 19 useMemo will still be important. It'll be a while before it truly goes away
Ohh man nicely explained 🎉❤
Premium explanation
great explanation, thank you very much!
Once again great tutorial...
Love it the way you explained everything single detail, Can I also use useMemo with autocomplete with fetch?
yeah you can!
all your video is awesome keep it up ,make small project which make use of the all hooks how to use in company level or share some difficult situation of it when to use which hooks use it will be great help
Currently in the process of making a full on course with exactly that!
great!! video man
This video helped me a lot.
Great videos. 1 question though, when you have count and items in the hook, why doesn't that lag as it seems like the items are being looped each time count changes?
Hey cosden, we can achieve the similar results using useEffect ? so how do we identify when should we use memo ?
// Use effect equivalent:
import { useState, useMemo, useEffect } from "react";
import { data } from "./utils/data";
const Counter = () => {
const [arr] = useState(data);
const [selectedValue, setSelectedValue] = useState(0);
useEffect(() => {
const val = arr.find((elem) => elem.isSelected);
setSelectedValue(val);
}, [arr]);
const [count, setCount] = useState(0);
return (
Count:{count}
setCount(count + 1)}>+1
selectedValue : {selectedValue.id}
);
};
export default Counter;
Thnaks for the video. Can you make a complete project in react with best practices. Thanks.
So while your example works, it's not the recommended approach. The way you have it, you have an extra state variable that you have to manage and a whole useEffect to manage it. If you do it like I showed in useMemo, then selectedValue automatically gets re-computed when the array changes, and you don't have to do it yourself. That's why it's a better approach.
There are a lot of times where something shouldn't be done with an useEffect even if it can, just because it introduces an extra dependency you have to manage and keep up to date. Also, your example creates an extra render cycle in the component which is unnecessary
How can we realize potential performance optimizations not just from a noticeable UI issue, but from the browser or React DevTools? Would love a similar video to this that discusses seeing the issue in the devtools and fixing it afterwards in order for us to understand how to properly debug performance issues like this.
Awesome...very well explained
Really great video. I have few questions if u don't mind.
What are the differences between useMemo and useEffect ? Not talking about syntax or the option return function.
Instead of using useMemo in this case, you can use useEffect and put items as dependencies.
useEffect(()=>
{selectedItems = item.find(item=> item.id)},
[items]})
Re-computation only triggered once items is changed, and instance is destroyed to create a new one right? Same as useMemo?
So why useMemo instead of useEffect?
Is it linked to memory usage or am i missing something?
Thank you
Can we use multiple use effect in one component
Super cool video. What is your Vs code theme
material theme darker
Thanks bro
@@cosdensolutions
youre an react angel haha,awesome bro,thank you
awesome explanation, thanks
Hi, I’m new to react and your videos are really helpful.
I have two questions:
1. In the last specific scenario, is it really necessary using useMemo? I mean, the only cause of rerender is when count changes, so useMemo would compare every render the dependecies.
2. What is the differences between useMemo and useCallback?
1. In the context of the video, no it isn't. But the goal was to show you how it works!
2. useMemo returns a value, useCallback returns a function. They are the same otherwise!
Oh, that’s right! Really thanks 😊
what is difference between use Memo and use Effect ????
useMemo works on the memoization concept. That means it stores the result of a function call based on the parameters passed, ex. a sum function where you pass 2 and 2, it will always return 4, so it will store that if you pass 2 and 2 it will directly return 4 instead of actually calculating 2 + 2.
useEffect just simply runs on re-render
do you still need useMemo for the case with === count?
what is the sense of useMemo in this case if selectedItem should be recalculated when you click the button? prevent recalculation when page is rerendered, but items and count are same?
Great Explanation, thank you. I have 1 doubt. If I use useState to store the value of selected items and changed its value only when there is change in the dependency array of the useEffect hook, then will it produce the same result? If yes then what is the difference between the two ?
function Demo({}: DemoProps) {
const [count, setCount] = useState(0);
const [selectedItem, setSelectedItem] = useState(0);
const [items] = useState(initialItems);
useEffect(() => {
const temp = items.find((item) => item.id === count)
setSelectedItem(temp)
}, [items])
return (
Count: {count}
Selected Item: {selectedItem?.id}
setCount(count + 1)}>
Increment
);
}
So first of all in your example you're missing `count` in your dependency array. You want that useEffect to run as count changes, as well as when items changes.
Second of all, that code is equivalent, but now you have an extra piece of state + the hook that keeps it in sync. The way I showed in the video is better because the "sync" happens automatically.
That approach is better because it has less code (one less hook) and less responsibility (selectedItem is auto updated through `useMemo` without manually having to do anything)
So you're basically doing the same work, just with extra dependencies, which isn't ideal 😁 best to keep things simple and automatic
was thinking the same thing glad to have found this exchange in the comments
Thank you both for asking and answer. I'm about to ask the same but got the point here.
But when you add count to the use memo dependency array, are you not now doing the find again on every click? Oh I guess this isn't a long running task now as its not searching through the whole array any more. But, doesn't that negate the reason to add useMemo in the first place?
Yep it does, but that's what you want. You don't want to prevent a re-compute, but rather control when it happens. You need the count to perform that operation so there's no way around it. However if you added a new state variable and changed that, then it wouldn't re-compute. It would without useMemo. That's the goal, to control and only when needed re-calculate!
Great explanation!
Great! i still wondering if i use useMemo hook to memo a component then render that component inside component as a variable. Is it oke, thank you ?
Yes that should be fine in theory!
Thank you@@cosdensolutions
doesn't adding 'count' as a dependency recalculates selectedItem on every click on increment ? thus you still have the problem if you spam increment ?
Yes it does. The goal isn't to make things never change, but rather control when they change and prevent unnecessarily changing. Of course this code here is slow by default, I did that to show you useCallback and how it works.
In this case, if you have to use count and that causes a problem, then maybe it's time to rethink the component and move some things around to avoid that
You can use an object or a Map for items where the keys are the ids. This would allow you to look up items in constant time (O(1)) by simply accessing the item via its id.
@@saadchraibi6712 explain what you are saying pls more in detail with example that could be helpful why would using key be helpful here?/
What is the difference between useMemo and useEffect? If we wrap the selectedItem function inside a useEffect like-
useEffect( ( )=>{
const selectedItem=items.find((item)=>item.isSelected)
},[items ] )
then it's serving the same purpose.
Thank you, great explanation
what happens if you remove the dependency array completely in use Memo?
Well explained Thank you very much.
perfect tutorial
I'm new to React and i'm asking if we could solve this probleme using useEffect Hook , by passing the "items" in the dependency Array ?
Nope
Use effect will compute the value again where as use Memo returns the computed value
@@kanieseiya4134 i dont get it ??
UseEffect is also will run first when the comp in intialzed and only if "items" array changed ??
Nice explanation