All language subtitles for 078 React.memo.en_US

Once I have shared my two cents about the performance optimizations and react, of course, let's go

to our example and we're looking for the folder number 12 named my component against set up online.

You're looking in the memo.

Use my more use callback folder and then more specifically, the setup folder.

Again, it's going to have the index, so you don't need to give it more specific path.

And what you should see on screen is the count.

So, of course, I can increase the count as well as I have some products over here.

So now, of course, let's navigate to that index and let's see what all the big fuss is about.

And you can see that I have some reports.

I have your state use callbacks memo, something we'll use in later videos.

And also I'm using my custom futch.

So use fetch hook where I pass in the URL.

In this case, again, the euro is my own IP where I'm just sharing my product.

That is for my Joske.

Of course we built a e-commerce store and this is the API that is providing those products.

I get back the products again.

I'm not using loading that.

I have the account and set count.

So this is my state variable and I have the heading one for my account.

And of course I have the button that increases the comp.

And then of course things get a bit more interesting where I have my big list.

So again, this is oversimplified example.

We're talking about big lists, whether data is one hundred items, thousand items or something along

those lines, because if you check it out, my list is not that big.

So I have a big list then.

The problem is products and I pass in the products that I'm getting back from my customers.

And again, if you didn't cover customer, please go back because I'm not going to cover it one more

time.

I'm not in here.

I have the section I iterate over the product and I create a single component, so single components

for the product just to emphasize one of the points.

And then of course, I have the key that is that specific value, the unique one, because I have the

list and then the other that product.

So I use the separate operator where I grew up, all the properties that are on the product.

Of course, if you want to see what we're getting back, be my guest.

In this case, I'll copy and paste and you'll notice that, of course, I have the array and then each

and every item is that product.

I have the ID, I have the image and all that good stuff.

Now, that is now the most important part, though, because, yes, in single product notice, I'm

accessing the fields property on the object.

Then I do a little bit more the structuring.

I get the image.

And this should look very familiar because we have done it a thousand times already in this detail.

The point that I'm trying to make is something else where at the moment I have the list, I have click

me and you'll notice that if you add effect in a single product as well as the big list, each and every

time you click on a button, you're actually re rendering.

And let me show you how is that going to look like.

So already imported the use effect, by the way, I didn't my let's go use fact now again, in your

case, it's going to be already there.

And if we scroll down here and if we go with big list and if you go with use of fact and then you call

it and we'll just log a big list called Big List called, and I'll do the same thing over here where

I'll copy and paste.

And you can also add the array here, the empty dependency array.

It's not going to change the simple fact that every time you click on a button, you'll invoke both

of them.

So again, I have used the fact and now say a single item called by the way, I can add here a count

as well.

So if I navigate to a bigger browser window for refresh notice.

So once we call our component, yeah, I have item called out and called on, it goes all the way up

to a twenty four.

Now what's more important though is that if you check out the console, I keep on clicking notice these

values, they keep on increasing.

So I have twelve items and then pretty much each and every time I click on a button I see this big list

called.

And also, each and every item gets really random.

Now, first of all, why is that happening?

Because I have the state value using you state and then each and every time I click the button, what

am I doing?

Well, I change the value.

Correct.

And remember, your state was doing what it was preserving the values between the renders and it was

triggering the let's say it together rear under.

Correct.

And of course, in my component, in the next one, I have my big list.

So each and every time I click on a button and I update my current value, I'm triggering the array

render.

And then of course I'm rendering the big list.

And then in the big list I have my single product, more specifically ARMATRADING over the array and

I return for each and every item, my single product.

So those ones also get re render.

So what would be the solution?

Well, solution is the memory function that comes with Riak again.

Please don't confuse it with use Memmo.

Use memory is going to do something else.

That is the hook.

We're talking about function by the name of Memmo.

If you want to be really specific, then of course it is a method because it is on react.

And what we would need to do here is just go with react and then that my mom or you can import it.

You can also do that up here where we're importing everything.

And then what you would want is to wrap your essentially whole component in that memo.

So memory is a function and you just pass in your component.

So simply you set up parentheses and then you set up all the logic that you had for the component in

that memo.

All right.

So once we save.

We all noticed that, yes, on the initial render notice, we have 12, so we call this 12 times because

we have 12 items that each and every time I increase.

Notice how we're not calling that.

Use the fact.

Why?

Well, because my mom is checking.

It is memorizing.

Well, what is the value?

So if this props value did not change, then we're not triggering the render because we need to remember

that every time the props or the state changes component or renders.

So in this case, what's happening is that we're triggering that rear ender with a count.

Correct.

Because each and every time we change that value, we triggering the referendum.

Now, when we add this react memo, what we do is we check, we say, hey, listen, did the value for

my props change or it's exactly the same.

And of course, the answer is, as you're clicking on a button, the value for the product is exactly

the same.

So then react is like, OK, so now I don't need to render my component.

So if we don't rearrange the big list, of course, as a result, we also don't render the single product.

So that is the memory function in react.