The whole key to option number two is making sure that we can run some code specifically when the term
piece of state has changed.
And that's what we want to use the use effect hook for.
Let's take a look at a couple of notes on use effect and understand what it is and how to use it.
All right.
Here we go.
Right now, we are making use of function components, function components do not naturally have access
to lifecycle methods like class components do remember.
Class components have lifecycle methods that get automatically called at certain points in time, even
though we are using function components.
There are still going to be some scenarios where you want to run some code, say when our component
is first rendered to the screen or whenever it is rendered or whenever something else happens.
That is what they use effect hook is for.
It allows functions to use something very similar to Life-cycle methods.
Now, I want you to really pay attention here to something like these are not exactly life-cycle methods,
but you can think of them being very, very similar.
In particular, the reason I say this or I want to put the clarification is, is that I don't want you
to end up writing inside of your function components.
Something like component did mount like so.
Don't do this is a big no.
No.
Opponents in Mount has absolutely no meaning inside of a function component.
And we should never see something called a component in mount inside of a function component.
That's just why I make the really clear distinction.
When we make use of use effect, we provide some configuration to it.
And this configuration is going to configure when we run some code automatically.
There are three ways that we can configure use effect.
And these three different ways are going to change when we execute some code.
The right here are the three different ways that we can configure use effect to run code at a very specific
time.
The first way that we can make use of use effect is to make sure that we run some code when the component
is rendered for the first time only.
That means that whenever our function component is first displayed on the screen, we can make use of
use effect to run some code.
Just that one time, just when the component first goes on the screen and that's it.
We'll never run that code again.
We can also configure use effect to run some code whenever the component is rendered for the first time
and whenever it renders.
And finally, we can configure use effect to run some code when our component is rendered for the first
time.
And whenever it renders and some piece of data has changed.
Now I've got kind of a boolean expression side of here.
You'll notice I say, or the first time.
And whenever it renders and some piece of data has changed to really make this correct.
I should put some parentheses around those last two steps, though, scenario really number three right
here is really saying that we can run some code when our campaign is first rendered and the compounds.
So this whole condition right here, if the component renders and some piece of data has changed, that's
when some code would also be executed.
Now, that's super confusing.
So don't we're going to show you another diagram to clarify number three right here very quickly.
Let's go back over to our other and merely start to write out some code and understand how we make use
of the use effect and how we can configure it to run some code in one of these three scenarios.
So back inside my editor, I'm going to find the.
You state imports and right after it.
I'm going to import U.S.
Effect.
Make use of use effect inside of our component.
We will call.
News effect.
And we will provide a function as the first argument, the first argument is always going to be a function.
It does not have to be an arrow function.
It can be a keyword function if you want it to be is totally up to you.
I personally like Arrow functions just a little bit easier for me to read.
So I use Arrow functions as the first argument.
We can then put in some amount of code inside of your.
They had council log right now, they will be automatically executed at some point time.
Now, here's the key of U.S.
Effect, we have to configure it to tell it when we want our code to be executed.
The one of these three scenarios.
To tell you the effect, which of these scenarios we want to have this erro function right here be executed
in.
We are going to provide a second argument to use effect.
So it's the second argument that we put inside of here that controls we in our code gets executed.
The second argument we're going to put inside there is going to be an empty array, an array with some
value inside of it, such as term or no array at all.
Those are the three options we have.
So every single time you use B, C use effect, you are always going to see a empty array or in array
with one or more elements inside of it or nothing.
You are never going to see, say, an object right here.
You're never going to see a second function defined or something like that.
You are always going to see.
Nothing a ray or ray with something inside of it.
So what do the presence of that array or no Ray or whatever?
What does that really mean for us?
Well, like I said, that second argument controls which these three scenarios we fall into.
Which ball, which scenario we fall into.
We could take a look at this diagram right here.
So if we put in an empty array, that means we want to run that arrow function.
So the first argument at the initial render of our components.
If we provide no array, that means we want to run the aero function at the initial render and after
every single re render.
And finally, if we put in an array with some value inside of it or some variable, that means we want
to run at the initial render.
And we also want to run the aero function after every render.
If some element inside this array has changed since the last render.
So in other words, this data variable right here has to change between renders or the aero function
to be executed.
Again.
But it match these three cases up to these different scenarios right here.
Let's just do a quick copy paste.
So this is really scenario number one over here with the empty array.
That means first time only.
There are a number two is the one in the middle right here, insurgent scenario number three is the
one over here on the right hand side.
I know this diagram is now horribly hard to read, but I want to make sure it was clear which scenario
kind of matched up to which.
All right, so now that we've got a rough idea on what use effect is all about, let's start to play
around with it a little bit in the next video.