Original subtitles

Not bad, not bad.

We're done with the first part of our tutorial, the U.S. State Hook.

Hopefully you completed the project as well because it will help solidify all the knowledge that we're

learning into tutorial, because at the end of the day, we can stay in tutorial will for remaining

of the days.

But if you won't know how to apply that knowledge as far as building project, it is going to be somewhat

useless.

So even though it's not mandatory, technically, you can just keep on going through the editorial.

I would suggest every time we are done with some specific tutorial part, just go ahead and do the project

that I'm suggesting, because at the end of the day, if you won't know how to apply them to build a

project, well, then we can sit in tutorial level all day long.

But it's not going to make much sense.

And our second tutorial topic is going to be the second most us talk.

So like I mentioned previously, the U.S. state and use effect are going to be most use talks.

And now we finally arrived at the second hook, the huge effect, an official explanation of use.

The fact hook is following where?

It allows you to do the side effect now before you freak out and frantically start searching for Urban

Dictionary, essentially when we talk about side effects.

We talk about any work outside of the component.

Now, that work could be changing document title that could be signing up for subscription, that could

be fetching data, that could be setting up a event listener and stuff along those lines.

So every time you think of usufruct, think of work outside of the component.

And similarly to our first topic.

Of course, we do have the folder and editorial and we're looking for the second folder name is Usufruct.

And then of course, again, we have the final folder where we have complete code and then we have a

set of folder where we all set up our examples on the file that we're looking for is this use effect

basis.

So what I would want you to do first is in the app Jayesh again, come up with the name My Case.

It's going to be set up just so you know that we are working on a set of folder and then you're looking

for a tutorial.

You're looking for use a fact folder, then the set up and then the filename is one hyphen, usufruct

and No.6.

And once you render the component, you should see in the screen, use the basics.

And once that is done, of course, let's navigate through the file again.

Let me reiterate, it is in tutorial, then usufruct, then set up and then use the fact based Jass.

So that's the file we're looking for.

And just like we use state, we have two ways how we can set up our hook.

We can either imported a notice again, errors, a named import, or remember how we did react, dot

and then use the.

So that is also an option.

Now, by default, use effect runs after every render or each and every time we render component use

effect will run.

So that is going to be by default.

And then there's two more comments that I will cover the clean up function and second parameter, how

it is going to be more important in the later videos.

So first, let's set up, I guess, some kind of year's effect.

So we have our function body again.

We go with user fact and then the way we use the fact works is we pass in the callback function.

So we have user effects.

So that's the hook and line within this callback function, whatever functionality will place will run

after every render.

And just to showcase that, let me go with log and I'll say render component here and then I will log

as well.

Call you.

So I'll go here, call use fact like so I'm online, if will open up the console, what you should see

is a render component.

So we have that and then of course we have the call usufruct.

So as you can see, once we render the component, we also call the usufruct.

Now the reason why you see this render component twice is simply because in the setup in the in the

Chargers, they have these react strict mode.

So if I move this out and if I remove it, you'll see that only once.

So basically that is their setup.

So as you can see now, we have only ORENDER component ones.

So if you're wondering why you see once in a while the render component twice, essentially whatever

we place as far as the function body, it is because of the strict mode.

All right.

So let me close the sidebar right now and let's talk about the effect.

So at the moment, we have only a simple console.

And by the way, yes, even the console log is considered a side effect.

I know it sounds funny, but that is true.

And once we are on the side effect, well, what we would want to do, for example, I would want to

change the title of the document title, The Moment to React.

How can we do that?

Well, let's try it out.

I think I'm going to close the console for now, and I think I'm going to come up with a button.

So in my address, I'll set up a button where essentially we click on a button.

Then we increase the value and then we will set up a new documentary that shows the messages that say

new messages.

And of course, the value will be equal to whatever is the amount of times we clicked on the button.

So here, let's do this.

We will go back to a react fragment and line in here will type out heading one where eventually there's

going to be a value.

And let's go right away, the button class name button, just for styling on click, we will increase

the value.

Of course, we haven't used the used state yet, so let's go here with CONSED and Non-value then set

value function set value not as equal to use state.

And again, we'll start with a zero.

And of course once we click on a button, what I would want is to increase that value by one.

Now I'm not relying on the previous values, so I will just pass in the new value in the set value.

And here let's just right click me.

Click me where we have the button.

So of course now I have the value.

And if you'll notice the moment I click, a couple of things are happening.

So in my console, each and every time I click, I'll have that hereunder component and then I'll have

that call usufruct.

So each and every time we click, this is exactly what is happening.

Why is that happening?

Because every time we click the button, we invoke set value.

Correct.

Now, what happened with the USA, USA?

Did you think it preserved the value between the Rangers and the second one it triggered or you render?

So every time I click on a button, I'm essentially running my use of it because remember, by default,

you use the fact we'll run after every render.

So each and every time we render the component we are running.

Essentially this used a fact hook.

That's what in a console we can see call use if I call you call usufruct.

Now, of course, let's do some more interesting side effect where not only I would want to log, but

I want to go with document.

And then title, and that is going to be called to a template string and I'll new messages, and in

this case I'm going to use parentheses than I would want to grab my state value, and which you'll notice

that the moment we render the component, of course, we call the use fact.

We can see that in console.

But I can also see it here where I have the new messages, I have new messages, and now I'm using my

state value, which of course is zero.

But now every time we click notice how we're updating the value here, we're calling the use fact after

every render.

And of course, the functionality that is within the use effect also runs because now I have documental

and now new messages is three, four and each and every time I increase.

Also my title changes as well.

Now, again, just to reiterate use a fact is used when we want to set up side-Effect, and that is

some work outside of the component.

So think data fettering, think listening for events, think signing up for subscriptions and stuff

along those lines and then by default it will run after every orender.

And the way it works, we pass in the callback function and then whatever functionality we set up within

that operation will run after every render.