Learn useMemo In 10 Minutes

hello everyone welcome back to my react hooks series or in this video we're gonna take a look at use memo how it works and when you should actually use it and if you're interested in diving into react even deeper make sure to check out my full react course which I'm gonna link down in the description below have you wanted free web hosting that doesn't suck well you're in luck because today's video sponsor atlanticnet is giving you an entire year long free trial of their hosting and if you use the code Kyle when you check out you're gonna get an additional $50 of credit that you can use towards whatever you want on the hosting platform on top of that this hosting platform has powerful servers with great data reliability and redundancy so you know that your site is going to be there and running with the data you want it to so make sure you use the code Kyle in the link down in the description below to get your free hosting welcome back to web data simplified my name is Kyle and my job is to simplify the web for you so you can start building your dream project sooner so if that sounds interesting make sure you subscribe to the channel for more videos just like this now to get started I just have some really basic boilerplate code set up for us to test our application I'm gonna walk through it real quick so you know exactly what we're doing I just have a simple single component called app which has two pieces of state one is a number which we can control by this input over here on the right and the second one is a boolean for dark or light which is toggled by this change theme button on the right side of our screen then what we do is we have a function which doubles our number so just multiplies by two but this function is very slow if I scroll down here you can see I just have a really long for loop that just loops doing nothing for a really long time to emulate what would happen in a really slow long-running complex function obviously since this function just multiplies by two all this code is doing is making the function really slow and if I change this number for example by clicking this up arrow you're gonna see it takes about a second half a second for it to actually double the number so you can see this function is quite slow to execute now continuing onward we just have a variable here which is taking this dark boolean and changing if we have a darker theme down here and then lastly over here we just have the output code which changes our number when we update here and also toggles our theme when we click this button so that's just the basics of our code and you may think okay this is fine code it's working great and the slowness is you know not that bad but it only is gonna be slow going we update our number but actually that's incorrect thinking if we click our change theme button you're gonna notice we have the same delay I'm going to click it now you can see it takes about half a second to a second for it to actually change the actual theme and the reason for that is because one you update state and react it's going to re-render your entire component so it's going to run this entire function from top to bottom which means that this slow function gets called every single time that we render our app component so whether we're changing the theme whether we're actually updating the number here or whether some other component is causing this component to re-render you're going to be forcing it to go through that slow function over and over and over again and this is a really big performance problem when you have these slow functions that don't really change that often so react has a built in way to solve this with a hook which is called use memo so we can import this views memo hook just like this and memo here stands for memoization which essentially is the idea of caching a value so you don't have to recompute it every single time so in our example this slowed function here takes an input of a number and it's always going to give us the same output every time we give it the same input so we can cache that input value number and the output it gives us that way if the number doesn't change we don't have to recalculate our SLO function over and over and over again and the easy way to use this is we just call use memo and we're going to pass it in a function and this function is going to be the thing that we actually memorize so this is the thing that we're caching which in our case is going to be this slow function we just want to make sure we return this slow function here get the result from it and then just like all of the other hooks that we talked about like use effect for example we're going to have a list of dependencies here and in our case the the dependency of this is going to be our number here our number is the only thing that changes and when our number changes we need to rerun the code inside this use memo hook but if our number doesn't change we don't need to rerun this slow function code so with that one simple change let's save and see what happened to our app it's loading over here we can change this to for example 1 and you can see it has a kind of delay change it up again it's going to have a delay when we click Change theme you're going to notice this is instantaneous I can click it as much as I want to and that's because when we go through our code we click Change theme it causes our component to re-render so it calls this function does all this stuff and it gets down to use memo and it says well our number is exactly the same as what it was last time so we're not gonna recall this slow function here because we already know what the result is it's the exact same thing as it was last time so we're saving ourselves from having to recalculate this number with the slow function and we only are forcing ourselves to do this when we actually update this number instead of our input here so we're essentially only running this slow code when we have to and not running it when we don't actually need to now this seems really nice and you may think let me just use memo everywhere why not just memorize everything like this theme style is here why don't I memorize that based on this dark boolean variable and the reason you don't want to memorize everything is because it does give you some performance overheads and some memory overhead for example this used memo function must be called every single render of your component so you're calling an additional function and also it's saving the value this previous value in some memory variable so you're forcing your memory to get larger every time you use memo because you have to store an additional variable in memory to store that previous value now this isn't a huge deal but if you start to do this everywhere in your application especially where you don't need it it's going to cause additional memory usage and additional performance problems when just not using it would have been better so I highly recommend you only use memo in this case when you actually need the performance benefits when the function you're calling is incredibly slow then use memo is great but there's also a second use case for used memo and that is something called the referential equality and if you aren't really familiar with value versus reference in JavaScript I have a video on that topic I'll link in the cards in description but essentially what that is saying is when you try to compare two different variables in JavaScript it's going to compare the reference in the case of objects and arrays so for example this theme Styles here is a specific object and if I were to duplicate this theme styles for example theme Styles to right here you would think that theme styles and theme style 2 are equal to each other but in JavaScript they reference two different objects they have the same values in the object but the actual reference to the object itself is different these two values are actually not equal to each other which is something really important and as you know instead of hooks and react we have this array here all of our dependencies and when our dependencies change it's going to rerun our hook so let's click a quick example where we have a use effect and we want to run this use effect every single time that our theme styles here changes so we're just gonna have a really simple console.log theme that changed and down here inside of our dependencies I'm going to have our theme styles let's just get rid of this console down here and of course we need to make sure we import use effect just like that and now if I just really quickly inspect this page here pull this over go to the console oops console you can see we get our theme changed being printed out and when we change our theme you can see it's continually printing out theme changed but a problem you'll notice if I clear this out is when we change our number it's also causing this theme change to be run and the reason for that is that referential equality what's happening is every time we run our function we get a new theme styles object being created and this new theme style object is not the same as the old theme styles even though they have the exact same values in the object the reference different places in memory and that's really important to know so in order to make sure that we only ever run use effect when our theme style object actually gets real we can use memo so what we can do is wrap this in a used memo make sure you pass it a function and in here we're just going to return to that object you just indent all this properly and in here for our dependencies we're just gonna put that dark variable because that's the only thing that this object depends on now if we were to rerun this you can see a change in our theme causes this to update our theme logs it out but when we change our number you're gonna notice we don't actually get anything printed in our console and only when we click change theme and the reason for this is that now we are wrapping this object inside of memorisation essentially if our dark variable doesn't change we don't read 8 our theme styles so we get the exact same reference as we had the previous time we rendered our app so now our use effect is comparing our old theme styles with our new theme styles but they both reference the exact same object so these are the two big use cases for a use memo the first and most obvious is when you want to make a slow function we wrap it in this use memo so that doesn't recompute every single time you render your component and it only computes when you actually need the value from that function since the inputs actually changed the second use case which is a little bit trickier is this idea of a referential equality whenever you want to make sure the reference of an object or an array is exactly the same as it was the last time you rendered if none of the internal workings changed you're gonna want to use memo here to make sure that you only update the reference of that object whenever the actual contents of the object change instead of updating every single time you render and that's all there is to the used memo hook if you enjoyed this video make sure to check out my full react course linked in the description to get a full overview of everything you need to know about react thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 129,463

Rating: 4.978261 out of 5

Keywords: webdevsimplified, react hooks, react tutorial, react js tutorial, react hooks tutorial, react hooks project, learn react hooks, learn react js, react beginner, javascript, js, learn usememo in 10 minutes, usememo, react useMemo, react js useMemo, useMemo hook, react usememo hook, usememo tutorial, reactjs usememo, react js usememo tutorial, use memo react js, learn react usememo, react memoization, react memo, react usememo js, react memo hook, react memo function, memoization

Id: THL1OPn72vo

Length: 10min 42sec (642 seconds)

Published: Sat Jun 06 2020