useMemo Explained | React Hooks useMemo Tutorial

this react app is kind of slow [Music] hello and welcome hi i'm dave today we're going to look at the react hook use memo how it differs from the react hook use callback and how to avoid the app performance lag you saw at the beginning of this video so let's get started i've got visual studio code here on the left and on the right i've got chrome i've got the app running just here on top and i've got the dev tools console here on the bottom now what we're doing is bringing in an expensive function expensive functions could also be referred to as costly or just simply as slow functions and a very good example of an expensive function is a function that makes use of recursion like this fib function does so it calls itself inside the function and we request the position here i'm requesting the 33rd position in the fibonacci sequence and it returns that number but it has to go through the calculations to get there so it takes it just a little bit and that makes it slow and when i'm typing my name i just did and then it shows up about a second later that means that equation is slowing down our entire application so we need to look at why this is and how use memo can help so inside our functional app component you can see i'm assigning fib number the result of fib and then we're going ahead and placing that inside of the jsx and i'm showing that output let's find it here here it is where it says number and that's the number we see over here on the right but it takes it just a little bit to do it and the further into the sequence i request the longer it takes if i request the 20th position it's fairly quick the 35th position kind of slow so it does make a difference i just picked 33rd because it wasn't so annoyingly slow that i couldn't show you the example but it still slows things down i can definitely outrun it by typing into the input so now what we want to do is consider how to fix this and exactly why it slows it down well the reason it slows it down is because when i type into this input over here the random input i'm updating the state and we know from use state that every time we update the state in react that re-renders the component so every time this component re-renders it's recalculating this fibonacci number even if we haven't changed the input even if the number stays the same it has to recalculate it essentially for every letter i type and every letter i delete and it's running just a little bit slow behind my typing so we want to go ahead and speed that up so that would be the first use of use memo is being able to optimize our application but there is another use and the second use of used memo is for referential equality so i'm going to go ahead and pull the console up and over a little bit just to go over a quick lesson on referential equality so if i take the number 5 use strict equals and five that is true that's a primitive value so five strict equals five the same with string strict equals string true that's another primitive value but if we look at an empty object use strict equals that's false it does not have referential equality they're stored in different places in memory they look the same they're not the same and the same thing goes for arrays which are also type of object in javascript so arrays and objects do not have that referential equality and we might get a result from a function that is an array or an object and we might need that referential equality and we can also get that from use memo because what use memo does is memoize the output of a function not the function itself that would be use callback use callback gives us a function with referential equality that we can call later use memo gives us the result of a function that it calls so now let's go ahead and look at a couple of examples of that first i just want to address that referential equality one more time before we apply use memo so i'm going to bring in use effect and now i'll put use effect in here there we go type that correctly use effect has a dependency array and what i'm going to do is put fib number in that dependency array now every time fib number changes we're going to log to the console new number because that's what use effect does it looks for a change in its dependency array and if there's a change so a fib number changes it will call use effect and we'll log to the console new number so now let's come back clear out the console here look at our app again i need to save our changes over here and now that we've got that let's put in a new number and i'm going to put in 33 still takes it just a little bit to calculate now let's look at our console output and when the app loaded we got new number and then we typed in two numbers so at first it was a 3 and then it was 33 so we got new number twice that's good let's look at what happens when i type in the random input the app is still slow it's recalculating that every time but we did not get new number anymore and that's because we didn't change the 33 number and 33 it's a primitive value so use effect knows it has a primitive value here that is not changing and so it's not calling use effect and that's before we put use memo on our fib function here so when we use use memo we're really guarding ourselves for values that are not primitive that are possibly objects or arrays for example so now let's bring in use memo [Music] and now let's apply use memo to our fib number value by wrapping this call to fib so we'll have use memo we'll have an anonymous function and then we're calling fib with the user number state inside of that and use memo has a dependency array there we go an array not an object and now inside this dependency array fib is outside the functional component so it does not need to be in there however user number is a piece of state and it does need to be in there so that is our dependency array for use memo now the difference here although it won't change anything with use effect we found that we didn't have a referential equality problem there because it was a primitive value that was not changing but we did have a problem with performance so now i'm going to put 33 back in here but now let me go ahead and type my name and i'm typing and it's showing up just as fast as i type there is no more lag in our application and that's because use memo is providing this fib number and that is not needing to be recalculated every time it is a memoized result from our fib function now that did not speed up how fast fib will calculate it's not a traditional memoized function it's just memoizing this one value but that helps our app render quickly and it eliminated the lag so while we're discussing this and i mentioned you didn't need to put fib in the dependency array of use memo because it's outside of the functional component well what if it was inside so let's go ahead and cut fib away there and we'll define it inside of our functional component instead and now we have a new problem and this problem is every time the app re-renders fib is recreated and so that is a new function so when we go ahead and stick fib in the dependency array as it should be now that it's inside the component we still have a problem because fib is new every time so once again our app should now have the lag issue when i save and i'll type my name and it's probably yes it's slow again i already typed it just waiting for it to come there we go so now i'll delete it still slow our problem is we need to use callback with fib as i mentioned use memo memoizes the result of a function that is called use callback will deliver a memoized function that can then be called so that's what is needed here and that's the difference between use memo and use callback use memo provides a memoized result use callback provides a memoized function so let's wrap our fib function and use callback and for dependencies really it's just an empty array here with fib it doesn't have any dependency we need to put in there but now that we have applied use callback to fib and fib is in the dependency array because it's inside defined inside the functional app component we don't have any problem with speed now i can type my name and it shows up just as fast as i type again now if you're more interested in the details of used callback i have a separate tutorial on that that i'll link to above and in the description below now before we finish i'm going to paste in one other expensive function this is just a made up function you can see i have it going through a for loop about a billion times right here and then i just say do something expensive it doesn't really need to when the loop's that long and then it just returns an array now here's the catch we remember an array is not a primitive value so this will not have referential equality to the array that it may have delivered before so let's go ahead and put this into place and see what happens so we've got get array and i want a value from it so i'm just going to call that value my array set this equal to get array what comes from git array and now let's put my array inside of use effect here so instead of new number we'll say new array and i'll save now i want to be able to see the output of the console a little bit and yet let's clear it out so we just get some new information here and we should get a new array there we go we got a new array eventually it took just a little bit to run that expensive function so now every time that i type inside of the input i'm updating state remember i typed four letters expensive function see what we got four times the new array so every time usefx said this is something new and i need to run and that's because an array is not a primitive value it doesn't have referential equality but we can gain that by using use memo so let's go ahead and apply use memo to the expensive get array function now git array is not inside the functional component app so we do not need to put it inside of the dependency array here we just need to call it we don't have any other dependencies and we can save that let's clear this out and there we go refreshed we got new array when the app started so now i'll type my name and it types quickly there is no lag we're not waiting on that expensive function and there are no more logs to the console that say new array that's because we now have referential equality with the my array value so use effect knows this is not a new array it's the same thing that it was given before it's that memoized value from use memo so i just wanted to give an example of a dependency in this use effect hook dependency array that was not a primitive value so it thinks an array or an object would be new every time unless it gets that memoized value from use memo remember to keep striving for progress over perfection and a little progress every day will go a very long way please give this video a like if it's helped you and thank you for watching and subscribing you're helping my channel grow have a great day and let's write more code together very soon

Channel: Dave Gray

Views: 568

Keywords: useMemo Explained, useMemo, use memo, useMemo react hook, react hook tutorial, react hooks tutorial, react hooks explained, react hook explained, react tutorial, memoize, react, react js, reactjs, react memoize, react memoization, usememo react, usememo react js, react js usememo, react js hooks, react js hooks tutorial, hooks explained, react use memo, usememo vs usecallback, usecallback, react memoization tutorial, usememo vs useeffect, react hooks, usememo, useeffect, memo, js

Id: oR8gUi1LfWY

Length: 13min 0sec (780 seconds)

Published: Tue Nov 23 2021