Hello friends, let's try to understand useMemo
and see how we can improve the performance of React applications. It's really important to know memoization
because as you know React renders a lot. Whenever a state changes the whole component
re-renders. And not only the main component, if you have
any child components, they re-render also. So I'm gonna show you how to cache expensive
functions and child components to make your applications faster. Okay, let's say we have a text state, and
we can change that text using this input. It means, whenever I update the text, my component
re-renders. Like that. But I want to write here the number which
is the sum of all numbers from 0 to 100 million. And it's quite an expensive calculation. As you can see there is a function. The number starts from 0. And we add here each number from 1 to a hundred
million. And it returns the total number. Let's create here a variable and call this
function, and want to show this on the screen. Okay, it's here. But if I try to write here something as you
can see there is a delay. It's not showing what I write immediately. The reason is when I change the text input,
it re-renders the component, and when the component re-renders, it calls this function
again and again. But it doesn't make sense to call this expensive
function again, because this number never changes. This is where we should use the useMemo hook. I'll say useMemo. It comes from React and works like a useEffect
hook. It takes a call-back function and a dependency
array. In this case, we won't have any dependency,
because this number never changes, always the same number. And here I'll write the function that will
be remembered. As you can see, even if we re-render the component,
this function is not being called again and this number is in the memory right now. Let's see how we can use a dependency. Right now, instead of this number, I'll take
a number from a user. So we can give any number here. To do that I'll create a number state. And to update this state, I'll create another
input. Like that. So I can pass this number here. And as you can see there is a warning, because
we should write this number as a dependency. It means this function will run at the beginning. And after it'll run again, only when this
number changes. Let's see. As you can see the function is running but
if I change this text it'll not run again because the number is still the same. Let me show another use-case of useMemo. Actually, I've already explained this in the
useEffect video but I'll just quickly recap. Let's say we have name, age, and country states. I'll create here a userType that indicates
whether the user is underage or not and a US citizen or not. You might think that "Okay, it's not an expensive
calculation, and also I have 3 inputs here, and userType uses 2 of them so it'll be updated
very often. In this case I don't need to use useMemo". Yes, you're right. But you should be aware that this is an object. It means, when you re-render the component,
this object will not be the same again. What I mean by that? Let's create a useEffect, and whenever userType
changes, I'll write "user type has changed". Right now when we update the age or country
the userType changes but when I update this name, it's changing again. Because 2 different objects with the same
content are not equal in Javascript. So even if the age and the country don't change,
on every render a new object is being created. Nothing is changing inside, but the object
references are different. If you don't know why this is happening, I
recommend you to watch the useEffect video. I explained it there in more detail. And in that video, there was a similar example,
and one solution was to wrap this variable with the useMemo hook. Right now it depends on only age and country
so it'll not change on every render. So remember if you have an object or array
variable that you need to use as a useEffect dependency, you can wrap it with a useMemo
hook. Okay, right now we know how to memoize values
but what about components? Again we have a text here to re-render the
component and this time we have a child component. And this component is really expensive to
re-render. It can have many functions inside, or it can
fetch thousands of rows of data or maybe it has a large table here, whatever it might
be. Basically, we shouldn't call this component
unnecessarily. But here when we render the parent it re-renders
also. To prevent this we can memoize this component
using React memo. In this case, it'll not re-render again and
again. Okay. We know how to use useMemo for values, and
React memo for components. And they drastically increase the performance
of our apps. So if they make our apps faster, we should
wrap every variable with useMemo, and every component with React memo, right? Well, the answer is "no". It's one of the most common mistakes every
beginner makes. They tend to use them everywhere because they
believe that everything is better than re-rendering. But what they don't understand is memoization
is not for free. Everything you use them is going to temporary
memory. So if you use more memoization than actually
needed, it might cause some problems. That's why I especially use this word everywhere. If the calculation is not that expensive,
most probably you don't need them. And believe me, in most cases there are smarter
solutions that you can use. For example here, instead of using React memo,
use can basically separate components. So I'll create here a form component, and
update the state here. Let's import this here. And that's all. What about if we have to use this state for
the parent div. It's inside the form right now and we can't
use this state here as an id for example. Let's take everything back, and use the state
here. Actually, let's change this state to the background
color. It makes more sense I think. And I'll change the background color of this
parent div using the state. Like that. So how we can prevent re-rendering this expensive
component? Basically, I'll create a background provider
or whatever you name, and this component will be independent of the expensive component. So it can include any component as a child. Let's delete this, and write here the provider. And pass the expensive component as a child. And as you can see it works as we expected. So what happens here is when the background
color changes, this provider re-renders. But since the children prop is still the same
it gets from the main component here, React doesn't visit that component again. And here as I mentioned, it's not an expensive
calculation and it'll change very often. So instead of useMemo, we can change the useEffect
dependency, and write every single object property instead of the object itself. As you can see there are some alternatives
to memoization. It's important to know them because React
warns us that it's not guaranteed that your memorization will work in any case. So it's better to try other alternatives first,
if it's not enough to solve problems, then use memo. And the same thing for the useCallback hook. But I'll explain that hook in another video. By the way, let me know which React memo or
feature you want to see in the future. Maybe in the next video, we can create a decent
project with what we've learned in the past 4 videos, and it'll be a good opportunity
for you to see how they are used in a real-world project. Okay. That's all. If you learned something new today please
like the video. You can support lama dev by using the link
in the description below or joining the channel. Don't forget to follow lama dev's social media
accounts. I hope I'll see you in the next tutorial. Goodbye.
