React Hooks useMemo Tutorial

so we're gonna be taking a look at the use memo hook in this video this is a hook that's great when you want to optimize computed values we're gonna start by looking at an example without it and then we're gonna add it in and see how it's actually helping and that's actually something I would recommend doing whenever you're using it for real and a project is start without using it and then if you see it like something as being slow or recomputed too many times then think about adding this hook in so we're gonna do is we're gonna start from here I have a single react component and I have a counter so I have a u state which is set to zero and then I have my counts that count and I'm displaying the count and I have a button where you click and increments that count so the task that we're going to do is we're going to start by fetching from this Kanye REST API so what this is is a list of quotes that Kanye has tweeted and we're going to fetch this JSON file here so I'm gonna copy this a URL and I'm gonna display the word the longest word he uses in his tweet so we're gonna compute the largest word most number of characters a single word that he uses and one of those tweets is so we're going to start by fetching that information so I'm going to say Kant's data is equal to use fetch and when it passed this in that URL and authonomy auto import i'm gonna import from use fetch now use fetch is a hook that I created in a previous video if you are curious how this was created I recommend going and watch my use effect video in this react hoax series basically what we do is we store the state which is null by default and we also tell you whether it's loading and then in a use effect hook here we fetch the data from that URL and then set the data in the state here and that state is well to returned so what we're gonna have is the data is gonna be null at first and then we're get a array of strings or yeah array of strings what we get back from this REST API so what I want to do with that is I want to compute and we can create a function inside of here I want to also mention that so I'm going to say Const compute longest word I wanted to mention that I usually write arrow functions like this but we could also create a function inside of here like this that's totally a fine thing to do as well so we're gonna say compute longest word and we are going to say if we don't have any data it's going to return empty array otherwise we're gonna say let the longest word is equal to an empty string and we're gonna return the longest word and here we're gonna iterate through all the data so we're going to say for each sentence and I'm actually going to say sentence dot split by space and then we're gonna do for each word so basically we're gonna enter eight through every sentence and then we're gonna split that sentence by space which will give us an array of words and then we're gonna loop through each word and then for each word we're gonna say if we're dot length is greater than longest word a dot length then longest word is equal to word and that's it and then we're gonna return longest word from this and then I'm going to just add a console.log at the top here I'm gonna add right here actually this is the more important one computing longest word and then I'm going to display this down here so just get the longest they call it get no compute longest word so we're gonna give that a save and let's take a look at this data dot for each is not a function alright let's do a console dot log of what the value of data is and see where I wrong with this I was thinking it was gonna be an array of data you know what oh it's a text file I forgot we did that so in my use fetch I made I did X out text because the API we were dealing with was a text file so I didn't do dot JSON we could change this to dot JSON here or in a file over here we could say oops say json stringify or sorry parse alright so you can see this is the longest word that he used in his tweets and so you can see we are computing the longest word here we did it once now you noticed what is the problem with what we're doing so what we're doing here is we are computing the longest word and so this is what I would call is a computed value this value we're computing is based on this this value right here I'm kind of just you know grabbing the value based on I'm not patent I'm not passing in the value through like a function here I could do that so it's probably a better thing to do so here gonna say array and array so that's the first thing what I was doing is I was just like directly accessing the data up there that can sometimes cause problems with closures and JavaScript so I usually like to pass in a parameter there so why don't we do that real quick and passing data here and basically what's going to happen is if we start rear end during for example if I were to increment the count here we're gonna recompute the longest word every render so every time I increment discounters we are doing that for loop where we're looping over and finding what this longest word is so we're basically recomputing this value over and over again but the value doesn't really change because the data is not changing and so this is a situation where use memo can be useful but again a lot of times we don't even have to worry about adding it in like right here I don't see any performance concerns I don't see any lag in this situation I might even bother making it or optimizing this so that's something to note before you just jump in and use use memo everywhere it's something that I feel like you only need to use when you start feeling stuff being sluggish so pretend this was even more values and we're getting something that was sluggish what we could do here is we could say Const longest word is equal to use memo use memo and so how this hook works is the first one is a function that returns a value in our case we're gonna have a function here and we're going to pass in compute longest word passing in our data so basically this is the function that will return the computed value and then here we add our dependencies and so in our case only dependencies while our two dependencies actually are compute longest array and the data all right so we could add data and compute longest array or compute longest word well let's see what we did here so the function makes dependencies of use memo hook to fix this definition and they use callback awesome so we're actually in iya Slynt warning to put this in a use callback which was actually what I was about to talk about because right now compete longest word here is a function that's going to be recomputed on every render so use memo is gonna do absolutely nothing right now because the value of this changes so I pass this in here so what longest word will store it is the value that was computed here so whatever's returned from this function is going to be stored longest word so if we come over here we can see we're computing the word every single time and that's because this function is gained create every time and so this dependency is being recreated every time so there's a few things that we can do this could cause problems just removing it as a dependency cuz we use it inside of this so I usually recommend adding as a dependency but we could use the first step would be to just move this outside now that we are passing in the parameter there's really no reason for this particular function to be inside of our component here so that's really what I would recommend in this situation but we could also use use callback in this situation if we want to so just for demonstration purposes let me show you what the use callback could look like and actually let's just show that that works first so we'll give this a save so now if I increment this you'll notice we are not recomputing the longest word we only do that once and so that's really the purpose of use memo if you've used reselect with redux before it's going to be a similar thing where you can now only have to compute things whenever the dependencies change here so whenever the dependencies change this value is recomputed and passed in here and so that's I use use memo in rare occasions when I need this but a lot of times I don't even need to worry about memorizing this sort of thing anyway let's look at the use callback real quick so I could pass this here and I could say use callback and so here we're gonna pass in our arrow function right here and to use callback so I over here I needed to add a parenthesis and then I need to add the dependencies of this particular function which is an empty array because we're not using any dependencies inside of here alright so we can increment you can see it the same effect here it's not recomputing I think also if you're using use callback somewhere and you don't have any dependencies that's probably a sign that you can actually just take the function and put it outside so in this case I wouldn't recommend using you just undo all the way up to here I wouldn't use use callback because there's no purpose if you can I would you make functions like this where they are pure they don't use any outside things and you just pass them in as parameters and you can stick them outside like this that's what I would recommend for situations like this so there you go that is what use memo does and when it is useful you

Channel: Ben Awad

Views: 59,701

Rating: 4.8610272 out of 5

Keywords: useMemo, useMemo Tutorial, Hooks useMemo, React, React Hooks, React Hooks useMemo, react usememo, React Hooks useMemo Tutorial

Id: RkBg0gDTLU8

Length: 11min 21sec (681 seconds)

Published: Thu Jun 27 2019