React Hooks Tutorial - 27 - useMemo Hook

in the last video we had a look at the used call back hook which is used for performance optimization as it turns out there is another hook which is also concerned with performance optimization and that is the use memo hook in this video let's understand with an example how to make use of the memory hook I'm going to start off by creating a new file called counter dot GS within the file I'm going to use the snippet RFC II to create a functional component within the component I'm going to create two state variables using the state hook so import you state and then within the component we create to counter variables counter one set counter one initial value of zero and the second counter to set counter to initial value of zero next I'm going to create two functions to increment the count value increment one which is equal to an arrow function where we call set counter one passing in counter one plus one similarly Const increment to which is again an arrow function we call set counter to passing in counter to +1 finally in the JSX need to add two buttons to display the respective count values along with a click handler to increment the count values so div tag button count 1 which is counter 1 on click we increment 1 similarly the second button the tag button count 2 on click increment - all right let's include the component in emojis and head to the browser you can see that we have two counters I click on the first button and it's count value increments click on the second button the second count value increments noting that we have not learned already well now we have a new requirement next to the first counter we need to indicate whether the count value is an odd number or an even number sounds simple again so let's go back to vs code and create a function that contains the logic Const is even which is an arrow function and within the body we return counter 1 modulus 2 is equal to 0 next in the JSX we include a span tag and then we check is even we display even else we display odd all right let's save this and test it out initially you can see that counter 1 is 0 which is even I increment counter 1 and the text changes to odd increment again and it toggles between odd and even if increment counter 2 on the other hand you can see that the text remains unaffected now let's take our example to the next level at the moment we have a simple is even function which takes hardly any time to execute in real world applications though he will sometimes come across logic that takes considerable amount of time for execution that is a function that isn't so good with performance it could be for example fetching thousands of items mapping that array filtering that array and even sorting that array now we don't really have the kind of logic here so let's induce some slowness into our function so within the is even function need to declare a variable let I is equal to 0 and then add a while loop that simply iterates for a long time so while I is less than 2 followed by 9 zeros you're simply going to increment I so I plus plus so the loop doesn't really effect a return value but it does slow down the rate at which we compute where the counter 1 is odd or even now let's save the file and see what happens in the browser to start off we have initial count set to zero for both the counters I click on increment counter 1 and you can see that there is now a second or two delay before the UI updates I'll click again so watch closely see that a UI is slow in updating and this is because in the UI we are rendering whether the number is art or even and that logic is from the east even function which as it turns out is really slow and this of course is expected if the number changes react needs to check if the new number is odd or even but take a look at this I now click on increment to and still there is a delay with the UI updates watch closely I click and after a second or two counter two increments this is strange though isn't dead why is counter too slow as well well that is because every time the state updates the component re-renders and when the componentry renders these even function is called again the function is slow and hence even when we update counter to the UI update is slow so what we need is a way to tell react not to recalculate certain values when unnecessary especially the ones which take a long time to compute in our example we need to tell react not to calculate whether counter one is odd or even when we are changing counter two values this is where the use memmer hook comes into picture yes memo is a hook that will only recompute the cached value when one of the dependencies has changed this optimisation heads to avoid expensive calculations on every render the way you use memo works is very similar to how use callback works first import use memo from react next win the component call the use memo hook as the first argument we pass in the function whose return value needs to be cashed in our example this would be the arrow function to calculate if a number is odd or even I'm going to cut this arrow function and paste it as the first argument as a second parameter we need to specify the dependencies our function depends on the value of counter one that is whenever counter one changes we are telling react to recompute the value and not use the cached value so in the array specify counter one use memo returns a cached value which we are going to assign to the variable is even finally in the JSX I'm going to remove the parenthesis is even is not going to be a function call because it now stores a value all right let's save the file and test it out I'm going to click on counter one and you can see that the delay is still present now that is because we need to recalculate is odd or even when the value changes when I click on counter to however you can see that the updates are way faster this is because react is now using the cached value of is even function to display where the count 1 is odd or even since the value never changed for counter 1 there is no need to recompute this odd or even value react will simply use the cached value from the previous render this is how use memo hook can be used for performance optimization now if I go back to the code you might feel that use call back and use memo are very similar what is the difference but the difference is that use callback caches the provided function instance itself whereas use memo invokes the provided function and caches its result so if you need to cash a function use callback and when you need to cache the result of an invoked function use memo alright that is about use callback use memo and performance optimization with hooks thank you guys for watching feel free to subscribe I'll see you guys in the next video

Channel: Codevolution

Views: 83,770

Rating: 4.9790087 out of 5

Keywords: Codevolution, React, ReactJS, Reactjs, ReactJS Tutorial, React Hooks, React Hooks Tutorial, ReactJS Hooks, React Tutorial for Beginners, ReactJS Tutorial for Beginners, useMemo Hook, useMemo Hook in React

Id: qySZIzZvZOY

Length: 10min 41sec (641 seconds)

Published: Mon Jul 22 2019