All language subtitles for 006 Preventing Function Re-Creation with useCallback()_en

We can make React Memo work for prop values

that are objects as well.

We just need to tweak the way we create

and store those objects a little bit.

There is an extra hook provided by React

that helps us with that.

And that is the Use Callback Hook.

Use Callback is a hook that allows us

to basically store a function across component executions.

So it allows us to tell React that we wanna save a function

and that this function should not be recreated

with every execution.

With that one in the same function object is stored

so one in the same place in memory

and therefore the comparison does work.

Because just to make this clear again as well,

if you have object one,

like this and you have object two, like this,

which looks similar you'll learn

that they aren't similar in JavaScript.

If you however, said object two equal to object one

you point at the exact same place in memory

and therefore now object one will be equal to object two.

And that's in the end what Use Callback does for us,

it will save a function of our choice

basically somewhere in React's internal storage

and we'll always reuse that same function object

then when this component function executes.

And using it is simple.

We just wrapped the function we wanna save with it.

So here we use the Use Callback Hook

and pass our function as a first argument to use callback

and Use Callback then returns that stored function

and when the app function reruns Use Callback will look for

that stored function which React stored for us

and reuse that same function object.

So if we know that this function should never change,

we can use Use Callback to store it.

Now you see I got some yellow squiggly lines here though

which tells me that I did probably forget to pass

an array of dependencies.

Use Callback like Use Effect actually wants

a second argument and it wants it even more so

than Use Effect and just like for Use Effect

the second argument should be an array.

An array of dependencies off this Use Callback call.

And the dependencies here are the same as they are

for Use Effect.

Anything you use in your function

which is coming from the surrounding component

so any state or props or context should be specified here.

Now here we only have to state updating function

and we could add this as a dependency but we don't have to

because as mentioned early in the course React guarantees us

actually with help of Use Callback probably

that this will never change so that this will always

be the same function object.

Hence this is an exception which we don't have to add.

And then in this simple callback we'd have nothing else.

Keep in mind that this code here is just a function

we pass to set show paragraph.

So that is totally contained inside

of our callback function.

So therefore here we have an empty array of dependencies

which basically tells React that this callback function

this function here which we wanna store it

in toggle paragraph handler ultimately will never change

that it has no dependencies

and the data for always the same function object

should be reused when the app component rerenders.

Hence now if I saved that, and I reload,

we see button running once but then you never see it again

because now React Memo is able to do its job

because we ensure that all the prop values

we pass in are a comparable in this case

because this toggle paragraph handler function object

is guaranteed to always be the exact same object

in memory because of Use Callback.