Original subtitles

Let me come back to useCallback

because it is important to understand this.

UseCallback allows you to save a function

so that you can reuse it.

Now you had to specify this strange dependency array,

and I don't know about you, but initially you might think,

what do I need this for?

My function has always the same logic

across rerender cycles.

Well, keep in mind that in JavaScript

functions are closures,

which means they close over the values

that are available in their environment.

Now, again, if you're not 100% sure about closures,

attached you'll find some resources

that get you started with them

because you need to know closures

to fully grasp how React works.

Let me give you a concrete example.

Let's say we have a second button,

which enables the toggling functionality.

So a button that makes the other button work.

Allow toggling.

For that we need a new state,

allow toggle and set allow toggle.

And initially that's false.

And we have a new function here,

allow toggle handler.

We could again useCallback but for the moment

let submit it, doesn't matter here.

Here I wanna call set allow toggle and set it to true.

So I always set it to true here.

This does not toggle the toggle value

it just enables toggling for the other button.

Because now, and that's the gotcha,

I will not only bind the allow toggle handler here

to the new button.

Instead, I will use the allow toggle state snapshot

in my other function here

to check whether I'm allowed to set show paragraph.

So here I will check if allow toggle is true,

and only if it is set show paragraph will be called.

So the show paragraph state will only be updated

if toggling is allowed.

And now I will also reuse show paragraph here

to replace my hard coded false value.

With that, if the app reloads,

you will see that if I click the toggle paragraph button,

nothing happens.

Now, if I click allow toggling,

now the other button should do something.

And when we click it, we all should see app running.

However, if I click it still nothing happens.

And that's because functions are closures in JavaScript

and because we're not using useCallback correctly right now.

We even got some yellow squiggly lines here

to make us aware of that problem.

At least I got them here.

Now, what is the problem though?

Functions in JavaScript are closures.

That means when a function is defined,

which happens when the app function

runs in this functions case,

when that function here is defined,

JavaScript basically locks in all the variables

that we're using in there.

All the variables that are defined outside of the function

that we are using, I should say.

In this case, the allowed toggle variable,

that is a variable or a constant

coming from the app function and I'm using it

inside of this function.

Therefore JavaScript closes over that constant

and basically stores that constant

for that function definition.

That means the next time this function here,

the toggle paragraph handler, is executed,

this stored variable will be used.

And with that, the value of that variable

at the point of time, it was stored.

This generally is perfect because this allows us to use

variables from outside the function, in the function,

and call that function at any point of time we want,

which is exactly what we want for a function

that we bind to a button.

The problem with that, and with useCallback however is,

that with useCallback we're telling React

to store that function,

and exactly that function somewhere in memory.

Now, when the app function is re-evaluated and reexecuted

because the toggle state changed,

then React will not recreate this function

because we're using useCallback where we told React

that we don't want to recreate it under all circumstances.

So therefore the allow toggle value

React stored for our function,

is still the old allow toggle value

from the first time the app component was executed,

not the most recent one

because JavaScript, as I just explained,

stored allow toggle this constant

when it created that function here.

And that's of course a gotcha here,

that's a problem.

There are cases where we actually want

to recreate a function because values being used

in that function that are coming from outside the function

might have changed.

And here we have such a case.

So here we would want to add allow toggle as a dependency

in our dependency array.

And that tells React that we generally want

to store that function.

But, whenever allow toggle changes

and it has a new value, we want to recreate that function

and store that new recreated function.

And this ensures that we always use

the latest allow toggle value

inside of that stored function.

If allowed toggle does not change however,

then we don't recreate the function.

And with that if I save this, if we go back,

now, if I click Toggle paragraph nothing happens initially.

However, if I now click on allow toggling,

now we'll see that if I now click toggle paragraph,

we do get our paragraph and all expected output.

It's also worth noting of course, that for toggle paragraph,

we see button running, but we only see it once.

And that's actually our second button

where react memo has no effect

because we're not using useCallback

on the allow toggle handler.

We would see it twice if the button for a toggle paragraph

would also be rendered.

But that's not the case because our useCallback here ensures

that we're not rebuilding this function every time

we only did that once when allow toggle changed.

Now, I know these are concepts that can be confusing.

In the end it's not so much React though

it's more Java script

and you have to understand how closures work

and you have to understand

that primitive reference value concept.

If both is clear, it's absolutely clear how react works.

And I hope that this and the last lectures

could help you understand it

and made it clear how useCallback works,

how functions are really executed,

and how React memo works,

and how that works together with useCallback.