Learn useMemo React Hook in 10 Minutes | React Hooks Tutorial for Beginners

hey guys welcome back to another video in our mini series on react hooks so in this video we will learn everything about use memo and how it is useful in our projects to optimize our components in case of heavy operations so if this sounds interesting then stick around also don't forget to subscribe the channel and press the bell icon so that you don't miss the videos like this one so let's get started all right guys so i have a very basic react application set up and i have a single component which is our app component and in this app component what i am doing is i have taken a state variable of a counter so we are creating a counter and i have two buttons for the counter one is for the increment of the counter and another one is the decrement of the counter and what i am doing is whatever the value of the counter is i am passing this counter value into a function of a factorial which actually going to calculate the factorial so if you pass 5 it's going to give you a factorial of 5 which will be a 120 and then i have an input tag and i'm managing the state of the input tag with name and set name so if i demonstrate to you then right now the factorial of one is one if i click on the increment the factorial of two is two similarly three four five so in this way you can calculate the factorial and if we decrement it it works and for the input tag if i type anything the page then we just display the name whatever we are typing in the input fill all right so now everything is sorted but what this use memo hook is and when we should use the use memo hook now just take an example that if this factorial function which we have written is is kind of a heavy operation it's going to take some time and then it going to calculate the factorial and it's going to display the value right now if we click it we get it very instantly the value because we are not creating any of the heavy operation on this function but let's change this function into a heavy operation so for that what i will do i'm going to add a while loop which is going to make this function a little bit slow so i'm going to create a let i is equals to 0 and then while i is less than let's give some random big number so that it gets a little slow and then we will do i plus plus so now we have created this function a little bit heavy operation and now let's see what actually happens so when i click on the increment you will notice that it takes some time to update the value here so if i click it again it's going to take some time if i click it again it's going to take some time if i click it again and it's going to take some time so now this heavy operation is being done but the problem here will be that if i actually try to change the value in my input box you will notice that if i do a back press then the screen gets little bit freeze and it takes some time to change the value and that should not happen because we are not doing any heavy operation when we are interacting with this input box so this is where we can actually make use of a use memo function and this use memo hook will memorize the function which is doing the heavy operation so what we can do we will go here and we are first going to import the use memo hook so i'm going to write a use memo and then we are having this function which is doing the heavy operation and that is the function is actually causing the delay or the slowness so if i go here and do a back press then my state is getting updated and whenever the state gets updated the whole component re-renders and this re-rendering of the whole component is actually causing a problem because every time the component gets re-rendered the factorial function will be called and it going to take some time for the execution even though the value of the counter is unchanged so for that we are going to use the use memo so we are going to wrap this factorial function into the use memo so you can write use memo and this use memo will be an arrow function so let me make an arrow function and like the other hooks like the use effect we can actually pass the dependence on what value we need to make this use memo function run so what we will do i'm going to pass a dependency and this dependency is our counter whenever the counter is changed we need to execute the factorial function whenever the name state gets changed we don't need to call this factorial function in that case the value will be coming from the memoized function so now let's go and remove this and this is going to return the factorial function all right now i'm saving it and now let's try again what happens so if i click on the increment the counter value is changing and the memorization function will actually call the factorial to do the calculation so if i click again it's going to like some time now if i interact with my input text then it should be immediately so now you can see that it is fast and it's more optimized as compared to the before so in such cases the use memo function is very helpful so this is where you will use the use memo but that doesn't mean that for every function you are going to use the use memo first you will always write your code without using the use memo and then you will realize that on which part we need to optimize so that we can use the use memo or we are making some unnecessary function calls even though the value is not changing the second use case of the use memo is the referential equality so in javascript we have two things we have the primitive data types and we have the non-primitive data types so whenever we make an equality on the primitive data types they are always checked based on their values but when we do the equality on non-primitive data types like the arrays and objects they are always done the equality check based on their references so let me give you a quick demo of it so i will go to the inspect element i will go to the console and i'm going to write a variable a is equals to 5 and i'm going to write an another variable b is equals to 5 and now i'm going to do an equality operator on a is equals to b then it's going to give me a true because a and b are the variables holding primitive data type value but now let's go and write a is equals to i'm gonna write one comma two comma three so a is an array with one two three as values and let's write a b so b will also be having the same values so in now in this case a and b actually holds the same values but their references are different in the memory location so if i do a equals to equals to b then it's going to give me false and not true similar cases for the object so if i write a and the let's write the object name as the page all right and i'm going to write b and i'm going to give the value of b similarly name as the page all right and now if i do a equals to equals to b then you will see that we are getting a false so this use memo is also useful when we need to do a referential equality and to demonstrate the referential equality what i'm going to do i will actually going to change this part so here i'm going to introduce an hr and after the hr i'm going to create a new component so i'm going to create a component with display name all right and in this component we are going to pass a prop of name and this prop will be equal to the state of the name so i'm going to write name here all right and now we don't want to print it here we are going to print this in the new component so i'm going to remove this and i will have to make a new component so let's write a component of display name and this display name will be an arrow function and inside this i'm going to write a console.log and i'm going to print here as rendered so that we can see it in the console whenever this component is getting rendered all right and then now let's write return the jsx so our jsx will be the name and we are going to take this name as a prop so i'm going to do a destructuring and i'm going to write here as name all right so we have done it and now if i refresh it and if i click here and you will see that i'm writing of the page and this the page is coming from the display name component so if we go to the inspect element then you will see that the render is getting printed all right but now you will notice one thing that when i make an increment so in that case also the render is getting called and when i click again you will see that again the render is calling and this is because that when you change the counter the whole component is getting re-rendered and when it is get re-rendered the display name component actually gets a props and even though the props are same but a props is an object so the objects are always made equality based on their reference that's why every time we will have a new instance of the prop even though the props are not changed so in this case also we can make use of a use memo so what we will do we are going to make this function into a use memo function so i'm going to write a use memo all right and this use memo will have a arrow function all right and inside this arrow function what we are going to do we are going to have our props so our prop name was name and then we are just going to take this and we are going to add it here so we have made this uh component as a use memo and now if i save it then we are going to see that we have an error and that error is that the react hook use memo cannot be called at the top level react hooks can be called inside a function component or a custom hook function so even though we have this display name of function component we cannot make use of the use memo and that is because it we are calling it at the top level so for that what we are going to do we are going to make use of a react dot memo all right and now if i save it then we should be fine so now if i remove this and if i type this then we see that the render will be called because we are having the the name property is getting changed but now you will notice that if i click on the increment even though the component is getting re-rendered but the props are still the same so in this time we are making a check on the props and the referential equality of the prop is true that the props are not changed so that's why we are not able to see this render console here so this is how you can actually make use of the use memo so these are the two use cases where you want to optimize the expensive operation or you want to do a referential equality in both the cases you can make use of the use memo hook so just to be careful that you should never use use memo directly first you write all the code as it is and then you will start thinking that you need to make some of the functions to be optimized then only you use the use memo because when you use use memo for every function or everything then it's going to give you a performance overhead which is not good for your application so that's all i have in this video i hope you like this video a thumbs up is appreciated you can also connect with me via facebook or instagram you can follow me on twitter i will add the links in the description below and before you go don't forget to subscribe the channel and press the bell icon so that you don't miss the videos like this one thank you thanks for watching

Channel: Dipesh Malvia

Views: 3,314

Rating: 4.9285712 out of 5

Keywords: react hooks, react, react hooks tutorial, react hooks project, usememo react hooks, learn react hooks, learn usememo in 10 minutes, usememo, react useMemo, react memoization, react js usememo tutorial

Id: fzd2bvlyr70

Length: 11min 34sec (694 seconds)

Published: Tue Mar 02 2021