Learn React Hooks: useMemo - Simply Explained!

welcome to the last used memo tutorial you're probably ever gonna have to watch this one honestly is a tricky one you really have to understand use memo and how it works and when to use it because if you don't use it when you should you're going to have performance problems and if you use it when you shouldn't you might have some bugs some unexpected behavior and you might have some other performance problems so it's really important to understand this hook how it works and when to use it so stick around until the end of the video because we're going to cover everything there is to know about use memo and by the end of it you'll be able to use this in any application that you work on sound good cool let's jump on my computer screen and learn about use memo alright cool so we're now on my computer and I have here a very simple application that I'm going to use to show you the kinds of performance problems that you can run into into your own applications if you don't memoize your values and if you don't use use memo properly so this application as you can see it's a very simple application it has a count has a function to set the count which we use in this button here and it has a list of items an array of items and a selected item that we show here you can see it on the screen here we have count number of items zero actually this should be just sorry count this should just be the count because we don't really need the number of items right now and then we have the selected item which is a very very large number let's look at initial items so we can see what we're working with right here so initial items is a variable that holds an array of about 29 million entries and each one of those has is an object and has an ID property which is the index of that to keep it simple and then a is selected property which is going to be true or false and is only going to be true in this case for the last element in our array this is going to be important because this is going to show you how you can run into performance problems because the selected item is the last one in the array so keep this in mind so we have our application right nothing seems out of the ordinary nothing seems like there's a problem right there isn't a problem here if I click here let's test it out if I click increment right you we get count one if I click increment again we get count two click it again count three right what is the problem nothing works well it may not be so obvious right now because I'm doing it very slowly but there is some perform performance issues when I increment the count and you can see this I'm going to now spam the increment button to really try to increment it very quickly and you're going to see that the count is going to lag behind in the updates so let's do it I'm pressing I'm spamming I'm spamming and you see it's skipping some numbers right I'm still pressing it I'm still pressing it it's skipping numbers and if I let go it just now updated to 58 right this is wrong this is not how a performant application should look like so what is the problem right because something obviously must be going on but it's not so obvious because all that we're really doing is we're updating the count we're not doing anything else so like where's the performance problems coming from well for this we have to look at our component and we have to understand how react Works under the hood and how react treats State updates and how it renders the component because our performance problems come from there so in our component we have the count right and then we have items and then we have selected item when we're clicking this button to increment the count all we're really doing is we are calling this function right here this on click function which is going to set the count to whatever the count currently is plus one this is very simple there's not that much more to it all it does is it updates the count the important thing to understand is that in react to update something to up date State means you have to trigger a re-render of the entire component and this is very important it's very important because if we look at all of the things that are happening in our component which is all of the things that are going to happen on every render of the component we have here our count which is not expensive right there's no performance issues with our account we have here items which yes uses this initial items but because we gave it to State this will only ever be called once and that is on initial render when this state is initialized and then this initial items will not run again and again so there's no performance there but if we look here at the selected item this is where we have the performance issues because this selected item if you look at what it does it takes the items and then it goes into the array of items to find the item that is is selected and if you remember if we go into our initial items which is what this item still is this is a very large array of objects and the one with is selected is the last one so this by itself is going to be a very expensive operation because it has to go through 29 million items to find the one that is selected that is how find works it goes through all of the array until it finds one item and then once it found the item it will then return that item so this is a very expensive operation by itself but then add on to it the fact that when we're changing the count we are causing this component to re-render so we're causing the selected item to be recalculated every time the count changes that is what we're seeing here I press increment the count is changing and this code is going to Loop over the entire array and go until the 29th millionth item to find the one that is selected every time I press this button it is doing that and so we have this huge performance problems because we're doing unnecessary computations on every render and this is the performance problems that you are going to run into if you don't think about this properly and this is what use memo is here to fix so then how do we fix this with use memo well let's first think about what we're actually doing here we have a selected item that is going through the items to find every single item and return to us the one that is selected this is great but let's not think about this in terms of when do we actually need to run this when do we actually need to compute this so that maybe we don't have to compute this every time right maybe we can only set a certain point at which this is computed and only do it then right so the first time that we're going to have to compute this is the first time that this component renders because there's no way around it this is how our code is set up we have 29 million entries and we have to find the one that is selected there's no way around this so we have to run this at least once but then if you think about it if items is the same let's say count changes but items is the same item doesn't change then do we really need to recompute this when items is the same no because if items is the same then this will be the same and the selected item will be the same one so there's no need to recompute this again unless items is different right and that is the only condition we only need to run this once and then if items is the same in the next render we can just return the previous value right it's more efficient this way there's no need to recompute it but then when items is different then we need to recompute this and return a new value and that is what use memo is used for use memo is a hook that memorizes a value and Returns the same value until any of the dependencies and the dependency array changes until then it will recompute a new value so let's now apply use memo here see how it works and see how it fixes our problem of performance what I'm going to do is I'm going to import use Memo from react and then I'm going to wrap these items because this is our value I'm going to wrap this in user memo and then give it a dependency array of items and I'll explain what I'm actually doing so we're going to do use memo open a parenthesis open another parenthesis because this is how the Syntax for it is and then go to the end add a parenthesis here and comma and then an empty array I'm going to save this so that you can actually see what it is this is the Syntax for use memo so you have used memo which is a hook from react you give it an inline function with something that it should return a value that it should return which in our case is items.find right it is the selected item and then you give it a dependency array which controls when this should be recomputed so the way this works is it will calculate this it will run this code once right we've established that we need to at least run it once and then as long as nothing in the dependency array changes it will simply return the value that it computed that first time and so it will not spend the resources to recompute the value on every render and since we have items here right our vs code is now warning us that this hook use memo has a missing dependency items we need to give items to the dependency array to tell this that hey this depends on items and when items is different you should then recompute the value so let's add items to the dependency array and then if I save this and now I go back to our application and I'm going to spam the increment button once again you're going to see that now our button is super super fast so let's spam it you see I'm spamming it and it updates instantly there's no lag there's nothing there's no number skipped right it is super super efficient and that is how a performant application should be that is how your application should be and if you run into performance problems it is very important to stop and think about what your code is actually doing and see if you have something that is being recomputed without need and with this we have now solved our problems of performance with use memo now before we end the video there's one last thing that I want to show you and that is something that you might run into if you're not careful let's instead of item dot is selected let's put it if item dot ID is equal to the count right and if I save this okay and now you can see that our count is zero and the selected item is zero this makes a lot of sense right the selected item is the item that the count is equal to the ID of that item but let's now look at what happens if I increment the count I'm going to increment and oh or count is one but selected item is still zero count is two selected item is still zero why is this well you see this is a common mistake that people make with use memo and they forget to give the proper dependencies in the dependency array the way we have it currently set up it is only going to return a different value if items is different we didn't say anything about count even though count is now inside of the body of our used memo function so the selected item it doesn't care that count is different it will always return the value that it has saved until anything in its dependency array changes and again vs code is being helpful it's telling yes that use memo has a missing dependency count either included or remove the dependency array so what we have to do is we have to add count to the dependency array and then our error is gone and then you can see here that it updated properly and then if I just do a refer refresh so we can start fresh again uh give it a few seconds because it is still Computing the 29 million entries again like I said there's no way around not doing it at least once so that is the slowness that you've seen But now press increment and the count is 1 and the selected item is one count is two selected item is two count is three selected item is three and so on we have given it the proper dependencies so now this hook behaves as we want to so you should always be careful about using this about giving it the proper dependencies because it is very important and can lead to some unexpected bugs if you do this wrong and also you should really be careful when you use use mobile like in this case it made perfect sense that we use this memo because we had performance problems and we were doing something unnecessarily but you can also have the case where you might want to use memo but it's not necessary right use memo has a cost because it is behind the scenes comparing things right the way that it knows when to return the previous value or compute the new value it's running some code to come prepare this and that can have some performance implications if you use this too much when you shouldn't so you should really be careful when you use it and only use it when it's absolutely necessary like in this case and there you go that was used memo simply explained I really hope that by now you're able to understand this hook and understand its complexities want to use it when not to use it and the implications of not using it and using it when you shouldn't so now go out and use this in your own applications play around with it because that is the best way to really get a feel for how this works remember this is a tricky one if you've enjoyed the video make sure to leave a like And subscribe because it really really does help me out a lot I plan to make a lot more of these tutorials coming forward react tutorials in all shapes and sizes they are coming my name has been nurse cousin this is causing Solutions thank you so much for watching and I will see you all in the next video ciao

Channel: Cosden Solutions

Views: 2,725

Keywords: react tutorial, react crash course, react developer, learn react, react hook, react hooks, react hooks tutorial, useeffect hook, useeffect tutorial, programming tutorial, react hooks explained, computer science, tutorial for beginners, react component, learn programming, web development, frontend development, coding for beginners, simple code, easy programming

Id: vpE9I_eqHdM

Length: 13min 40sec (820 seconds)

Published: Mon May 08 2023