React.memo, useMemo, and useCallback Optimizations

what's up everybody hunter here and today I wanted to take a look at react and performance optimization with things like react memo and then that hooks such as use memo and use callback and how those work kind of in conjunction to give you some performance optimizations and react so let's get into the code here what I have is a simple bare-bones create react app I'm going to do a yarn start on it to start up the development server and I are had it up but here we go again and I'll switch the console and clear it out okay so this is base create react app and if i open it up in vs code this is what it looks like if you demoed around and played around with react I'm sure you've played with this before I'm gonna do a little cleanup here so I'm going to clear out some of the stuff and um as you can see it's hot reloading right here so in order to demonstrate this I am going to create a child component so this app Jas is the main component I'm going to in the source folder make a components folder I'm going to make a new functional component called child component and I'm going to delete neat little script that gives me a child component so in the return to desire returns though I'm gonna do child component okay now I'm going to go back into the parent component and put the child component component child component okay and I will put it in here all right so child component right here so by default every time a parent component re-renders in react the child component will rerender as well regardless of if it has props or anything like that so to demonstrate this I'm going to make a widow counter that you increment with like a button so we'll use some state I'm going to use the you state hook here and I'll just make a count and then a set count use state I'm going to start the count off at 0 okay and right here let's just do something like the count is count alright so we should have a count of 0 and then we're going to make a button type of button and on click it's going to just add one to the count and we're doing this to basically rerender the parent component and then we can then see what happens to child component once the parent component gets rear-ended so do that we'll do a set count and we'll do a count plus one okay and this is [Music] we'll just call this ad or something like that and that really doesn't really matter all right looks really bad let's add a little paragraph so it gives it a little bit of space okay so our count is working right so to demonstrate the rear Enders what we can do is in the child component we can do like a console lock so we're gonna make this turn then we'll do a console dot log basically every time this logs it's like the component is rear-ending rerender underfoot child okay so this child Cove on it has no props it has nothing it's just by itself so what happens when I start clicking you can see that it's rear-ending and that is default react behavior it's not going to do anything magical for you to prevent that from happening so this is where the first thing comes in which is react dot memo so wrapped up memo is a higher-order component and you wrap it around your functional component so we can do something like this so explore default react dot memo and when we wrap the child component and react out memo now when we see so let's clear it out and refresh it's gonna have a initial render right this is like the component mounting and it's sweet it's rendering for the first time but now as you can see when I hit the clicky clicky cookie nothing is additional eerie rendering so that is the performance optimization optimization they're talking about all right so let's kind of break this a little bit by adding some props to this component now with react up memo you can add like a title prop and it can be a string like this is the title okay and in here we can then start adding like h2 maybe and I'm gonna put this in the paragraph tag and then the h2 and do offset title okay so then when you pass in the title as a string this is key here there's a string it's still working fine right so key takeaway is strings like a number basically all the primitives will be okay with react memo now when I when you start passing in things like arrays and objects that is when things start to break so to demonstrate this I'm gonna make a Const of array all right and we're gonna make this an array of just some like one two and three okay and then so our titles there and now when we pass in our array you can see that it starts to re-render again so why is that well it's because react memo isn't smart enough to distinguish well it's not it's picking up that this is an array but what as actually happening is every time this rear Enders the array gets remade it's like a new array every single time so react out memo is going is comparing the previous props to the current props saying okay are they different and if they are not different than it will not rerender but since this is rear-ending or being created anew every single time it is not smart enough to catch that and then it kind of just rear Enders it every time so to prevent this we're going to use the hook called use memo so what use memo is what use memo does is we basically wrap it around an array or an object and then it will kind of memorize it and it won't make it it won't create a new array every single time to parent rear Enders so we can use it like this use memo and you can um boat takes a function and then you can return the array or the object or anything like that and then it has a second dependency array so this is not really depend on anything so this dependency array is blank so now if we save this and we start counting again we can see that it's fixed there's no more revenge rings of the child because we're memorizing it so this is one way to fix it another way is if you don't have anything in the dependency array you can just kind of skip the use memo altogether and the better solution is to actually take this out of the function body and if you just like put it up here now every time the parent re-renders it's not going to make this array new again it's going to keep it the same and then you don't even need to use memo at this time and if we do this you can see that there are no extra rear Enders so key takeaway is if you do a string primitives it's once you start doing raise and objects then you're gonna want to consider use memo or once you use me use memo and there's nothing in the dependency array you should bump it out as as much as possible you should bump the arrays and objects out of your function body so they're not constantly being made over and over again when the parent gets rear-ended all right so that is how use memo works I'm going to undo that all right so now what happens if we try to pass a function into the child component well the same type of thing will happen let us examine that real quick so I'm going to use this I'm gonna make a function that gets some data from an API and I'm going to use this API here this JSON placeholder just like a dummy API and with here you can get things like to Do's and you can get users and stuff like that so I'm just gonna copy this real quick all right so in order to do that we're going to have to use it use effect hook here okay let's give it a dependency array let's do a little fetch to make sure everything works all right so it's gonna do two do's and all right it's working now you can see if we go into the network tab we can see that it's working right here it's getting the data all right so what if we want to make this a little more reusable right so let's say we don't we want to do is on the parent component but maybe on the child component we want like users or something so what we can do is make a function out of it so const we can call it like fetch data something like that right and we can return this okay and then we can pass in maybe type and we make this into a template literal okay so now we're gonna fetch the type so this is a little more reusable so if we do fetch data and if we want let's see what the types are so - duze is one of the types so let's say on the parent we want to fetch - duze okay okay but in then on the child we want to fetch I don't know users or something so what you would do is you can pass this down into the child when we get rid of this array for right now and we're gonna pass in the fetch data okay do the child component so it'll look like that give it a go save and then in the child component now we can do a little copying because we're gonna have to use effect again step put it under here and maybe do a use effect okay and then this will now be a prop stop that's data because we're getting it from the parent all right and then in this we want users all right so at first glance everything looks great right this happens when you do this it looks normal right but if you notice if using create react app it's going to give you these warnings on the dependency arrays part of the es lint hooks rule of hooks and one of the rules of hooks and the use effect cook is that when you have a it's kind of like a cheat to just give it a an empty array for that dependency array Dan Abramov made like a nice blog post about use effect and how to use it this video isn't really about use effect but one of the takeaways is just leaving a blank dependency array is kind of cheating and you want to avoid that and you can kind of read the reasons why you can't quit fix on it and fix it it's going to put in props in here because in reality props dot fetch data is the dependency okay so we save this we come back here what's gonna happen every time now well we're gonna be fetching data every time we hit this add button which is not very good it's actually very bad because look every time we hit it we not only rerender the child we're now re getting data right so and if you're not careful you could find yourself in like an infinite loop situation and that is very bad so what is happening here well this is a function and same thing with the arrays and the objects every time the pantry renders which is every time I'm clicking this button the function will be created anew and when you pass this function as a prop in to you the child component react out memo is going to be like okay it's a new function I'm going to and if it's in the dependency array especially I'm going to rerun this use effect every single time so that is no good and this is where the use callback hook comes in so much like the use memo use callback is made just for functions so how we use it is very similar to use memo we wrap our function in a used callback so we can now do something like use callback it's gonna look the same as used memo you give it a function initially actually we can just do this we can just copy our nice function from earlier and straight up paste it in there and then this will have a dependency array notice how it's empty so we can actually bump this out which is the better way to do it but for demo sake let's pretend that you know we need something there's something in here and that and we need to keep it in the body of this and this is actually giving us a squiggly as well so if we do a quick fix it's going to pass this into here so we have done the used callback on this function so it's going to memorize this function which means every time the parent gets rear-ended it's not going to change and then the child will also not read in there so let's save that make sure everything looks right so we're passing in v data and here we didn't really change anything and now if we do a initial load see we get the two and now when I click on the Add button no more extra Network requests which is good all right so that is how you use the used callback so the general takeaway is every time you're passing things as props into a child component and those things are an array a function an object you're like spider senses should be tingling especially when you when you're adding them to dependency arrays either in like a use effect or anything else that has a dependency array when you start adding like a function to a dependency array you should start thinking okay where did this function come from and do I need to use something like a use callback or the better option is if there's nothing in here you should actually just move this whole thing out so if we move it out of the body it's the same function and we don't even need use callback all right we just saved some steps and the initial load it looks good hitting add also look good no extra network requests now one thing I thought like well I should just memorize everything why don't I just react up memo all the things because it seems like it's awesome right it's gonna prevent extra rear Enders and I'm gonna use callback on all the things but there is a blog post here by Kent that says you shouldn't just use memo and use callback everything there's actually a cost to it so every benefit there's a cost and the price you pay so I'm gonna link this blog down in the description so you can take a look at it hopefully if you look through this it makes a little more sense now that you watch this video and it shows you that you shouldn't just everything you should be smart about it and but now you kind of know how it works and the situations where it's important such as dependency arrays very important when you're passing like an array until they've been the object into here make sure those get memorized so this doesn't just constantly run every time the parent gets rear-ended hopefully you guys found this video helpful if you have any questions leave them in the comments below if you want to see more kind of like I guess this is a little more advanced this is like performance react if you want to see more videos like this let me know otherwise have a great day

Channel: Code Bushi

Views: 31,231

Rating: 4.9827437 out of 5

Keywords: javascript, react, react.memo, useCallback, useMemo

Id: 4BranN3qnDU

Length: 22min 8sec (1328 seconds)

Published: Wed Nov 13 2019