useMemo Hook in React | Memoization in React | Optimisation Techniques @NishaSingla

from time to time react components have to perform expensive calculation and to improve the performance of your components we can use memoization technique hello everyone welcome back to my channel and in today's session we are going to talk about how we can optimize or how we can use memoization technique to improve the performance of your component with the help of use memo hook so before starting use memo hook lets us understand what is memoization memoization is a technique of storing the result of expensive operation when the operation is invoked again with similar input the stored cached result are written rather than executing the function again so in react memoization can be utilized to optimize the calculation every time a component is updated and re-rendered and if you want to know more about memoization how it works in JavaScript and what all its advantages I have already added a separate video on this topic where I have talked about what is memorization how we can use it where exactly we should use it all the these things are explained in detail you can check out that video I will provide the link in the description but now with that understanding that memoization is basically allow us to hold the result of some function in Cache and now whenever my function execute with the same set of parameter instead of executing it again we get the result from the cache it drastically improved the performance of your application so in react if you want to use memoization there are two hooks that dedically designed for the memoization and the one is use memo and another one is use callback hook so in today's session we are going to discuss how we can use memoization in react with the help of use memo hook so let's see how we can use that so for today's session what I have done I have created a separate folder with the name of use memo hook and I have one user.js comp print which have just simple heading use memo hook and this component I am calling from my root component here and that's why we are able to see this on the screen nothing fancy right now let's understand how to use use memo hook so for that let's create some scenario where we have some calculation and then see how it will impact my performance with or without hook so for example let's assume I have a list of users okay as of now I am putting it hard coded in reality it will come from some backend from some API so let's have a react package import and I'm gonna use use statehook so as of now suppose I have a variable of maybe users list which is the array of object as of now I'm creating only few objects here okay so we have these four users and consider it suppose it has a very huge list okay now let's store this one in a state so I have user State and set user method that will help me to update this state initially my state will be initialized with the help of this users list so this user State initially will have this complete list okay now suppose I want to create a user card so I can have something like user card.js so this component I am designing uh keeping like I have a user's list so every individual user will have a card detail so I'm gonna use this component I will not design the card but I'll have a simple component where I will display the user detail so let's quickly create this component and we can export it from here now from users.js let's import this component first so now what I want to do I want to iterate through each user and I want to call this component to display individual user detail okay so for that what I'm doing I am creating one variable here and creating my list that I want to display so what I can do I can get the state that is my users and I can use map function to iterate over it so it will give me individual user detail and from here I can return my jsx so here I can say return user card and I'll pass individual user information to this component with the help of prop so now to render this user card I have to render my display list so here simply I can say display list save the changes and let's check on the Chrome you can see it will display four time user will load here both time my user card will execute and this user card has a static uh P tag as of now let's get it removed and use this data prop here instead so I can get it here in the prop and here I'm not getting any fancy layout so simply I can just replace this one and here I can say data dot name save the changes and let's check one more time so you can see I have the detail and let me have it as a list only it has a text alignment center let's comment this one okay so I have these name so far nothing fancy right just to conclude this one I have a simple component where I have some data that I just want to display in this user card component so I have just stored my data in a state and I'm just iterating over this user State and individual data I'm passing to this user card so for every user this user card is going to execute that I am displaying it here fine so now let's check this function here the logic here if I do console.log here and I can say preparing card and if you go to the browser open the console tab so that we can see how many time this logic is executing so you can see here it's calling four time right we have one warning as well that is the key warning because we are using map so ideally we should have a key property here so we can say user.id as a key so now this warning should not be there so you can see my component is or my that logic is executing four time because I have four elements in my array right so now let's have one more behavior on this component and then we'll see how that behavior will impact my user card okay for that let me add one more state if just to show you so here I can say counter set counter and initially my counter has zero value so here I can say counter so initially it will display zero fine now I will have a button that will allow me to update my state so I'll add a on click here and on click of this I'll call my set counter so here I can say handle counter function I am invoking let's create this function somewhere so this function is going to call my set counter function that will be my counter plus one okay save the changes and back to your browser so you can see initially it will call four time right now let's do increment if I click on this increment button my counter state will update but if you notice my counter is updating but if you notice here this preparing card is also executing again four times and it means this logic is again executing whenever any state in the user's component is updating ideally counter has nothing to do with my this logic right this logic is completely dependent on this users but as this logic is inside this user's component so whenever due to any state update if users confidently render so because of that my this logic will also execute again and executing this logic again means that number of time my user car will also re-render fine because once this logic will come I am rendering it again right so user card will also run again four time and as of now it looks like four time but consider it a real life scenario where this data is coming from back end and I have lots of users data thousands of users data so in that case due to any changes in the parent component this logic is also going to re-render ideally this should not call again because there is nothing I have changed in the users So to avoid this one we can wrap my function in a use memo hook so that my output value can be cache so if same user we pass again then it will cache the result instead of executing that logic again it will display the display list from the cache it's very simple so let's use use memo hook and see how it will help us to avoid this re-entering so here I can say use memo hook use memo Hook is very simple and very easy to use what you need to do let's get it from this code as of now I'll cut this one and I will use use memo hook use memo hook as you can see it will take two parameters the first one is your factory function and the other one is the list of dependencies so let's pass one function here and here I will paste my that logic and second argument here is the dependency array dependency array is very similar the way we have four use effect hook like how many time we want to execute this logic again if you pass it as an empty array it means only during first trending during initial rendering but I want that my display list should update with the new data every time whenever there is a change in the user state so users I'm gonna pass as a dependency save the changes and let's test so it will call my component four times now let's increment this one and let's see whether my that logic will execute again or not so if I click on this one you can see my state is updating but my that logic is not re-evaluating the reason being is because I have cash my result here with the help of use memo hook so use memo hook will say whatever you have here it will execute for the first time and it will store the result in here as a cash value now until unless my users will not have any change it will not re-evaluate this logic and this is called memoization that we can achieve with the help of use memo hook in react it means my user card now is not free rendering every time and it is very useful when you have a very big list okay now let's check whether if I have a change in my user State whether this is updating or not that also we can test one so what we can do I can have one text box here with the name of maybe enter name and on blood event I'm just executing one function set user detail and here I'll pass the name whatever I will type in the text box with the help of e dot Target dot value so it will create one text box here we don't have set user detail as of now let's create this function here so now you will notice we have this text box here so whatever value I'll pass here I can get or I can hold it here now I need to update my this user state with the help of this set users set users right as it is a array I have to pass it here as array let's copy the previous state and add a new object ID as of now what you can do you can count the total element in the array and you can do plus one for now and in the name whatever I will type in the text box it will go here save the changes and go back so you will notice initially it will render four time because for list I have if I do any change in the counter state it should not impact my logic because I have cached my result now if I type something here in the text box that will make a change in the user state which I have passed as a dependency to my use memo hook it means if there is any change in the user State then my use memo hook will not get the result from the cash value instead it will execute the logic again to get the result so let's test this one here if I pass Sam and press tab you can notice it has executed my content again so it means this is working fine so this is how we can use use memo hook to memorize the function result or value and this way we can optimize our components so now you must be thinking that whether I should use use memo everywhere no so use memo is very useful in a scenario where you have to deal with potentially large list of data like one example is this suppose this list is coming from a backend very huge list there you should use use memo or you use some search functionality filter functionality there you can use use memo hook but please make sure that you don't overuse use memory because once we heard like use memo can help for the optimization it doesn't mean that everywhere we should use it no it is best to write your code without use memo hook first and then Implement use memo hook and then compare both where exactly you are getting the better performance you can use profiling for that you can use you can use console.time to send decide how much time it is taking in execution use memo always doesn't mean that it is going to optimize your code if you don't use it smartly or correctly it can even harm the performance of your application so use memo hook definitely can improve the performance of the component you have to make sure to profile the company with and without hook only after that make the conclusion whether memoization Worth to use it or not so I hope you understood the idea like how to use use memo hook and where exactly you can use in the project in the next video we are going to see the other hook that we use for memoization that is use callback hook but for today's session this is all about use memo hook I hope you found this session useful if yes then don't forget to subscribe the channel and hit the like button thanks for watching

Channel: Nisha Singla

Views: 4,279

Keywords: nisha singla, react tutorial for beginners, react js tutorials, learn react, Hooks in react, useMemo hook in react, react interview questions

Id: 0KApQAtMZ3c

Length: 15min 14sec (914 seconds)

Published: Thu May 11 2023