Okay, so we already know how to replace some of the functionality with our functional components.
The functionality we have in the class components, but we never had it before with a functional.
So one crucial part of this is what is state.
So we know how to use it when you have use state.
So what else is missing on our functional component?
In the class component, we have an event so we can hook to when a component did mount, for example,
and on component update and so on and so on.
In the functional component, we never had that before, but with hooks we have that ability to actually
control it in a little bit different way.
In my opinion, you have more control with this and I will show you in this video how we can use it.
So first thing, what we need to do is we need to import another function from React and it will be
use effect.
So that function will be similar to what we have here.
So I can put it there.
Use effect.
And then basically this effect, it accepts a callback that means a function.
So I will do an arrow function here and then we will have it.
So we don't need to pass anything here.
What I would like to do is I will just show you if I will console log, let's say we put.
Our youth affect triggers?
So we are here in the component at the moment.
We have a warning and then some other things.
This is coming because we don't have a unique key in our map here, so we'll leave it as it is.
So we're supposed to have something unique and we could add an ID to this or random number.
It doesn't really matter.
What I will do is I will just remove it for now.
And I would like to illustrate you something else.
So we have that use effect, a method in place.
If I will add a number here you can see our use effect triggers.
If I will click another one, you can see this is twice why this is happening.
So every time I change something on my state, one of the states, it will trigger this effect that
means.
I can have it here.
So let's, uh, do something similar here.
And so if I will do that, will make it better to illustrate what is happening at letter.
And then we'll have letters.
So basically, and I will just do similar thing as we had with the numbers, but with a different state.
So if I will come back here, I have other number and other letter.
At the moment I don't display that numbers yet.
That letters.
Yes.
So let me just grab this.
And then maybe I can do it here.
And then I will have letters.
Letter and then letter.
So we'll have it like that.
We'll have numbers and letters.
So I'm here.
I will just remove this.
We can ignore it for now.
So what I can do is I can add a number and add a letter.
So this will add a letter.
Actually we are adding that to our wrong one.
So I will go here and quickly set numbers which shouldn't use this one.
We should use set letters when we use add letters.
So once again, my mistake.
Clear on that.
So if I add a number, I have four and you can see our function trigger.
But if I will add this one, you can see our function trigger.
So basically whatever I change, no matter of which one state this function use effect triggers.
So basically that also triggers when we have a new application.
So whatever our component mode, this is also triggering here you can see our use effect triggers.
So the first time it renders, it prints it.
Every time we change something, it prints it.
So this is basically a working as an update.
So whatever we update our state, we have it.
But the good thing here is that we can control when it's actually trigger.
So this function here, this callback, it's a first argument.
What we can do is we can provide a second argument and I can provide, as you can see here, an array.
So if I will provide an array like this in that array, I can specify which states I should listening
for updates.
If I will provide nothing here.
If I will save it, I can go here and you can see this has been trigger once.
If I will click here, it's not anymore.
If I click here, it's not anymore.
That means it triggers only one.
So that function we have use effect.
It's the same effect as we component did mount first time.
It triggers.
We run wherever it's here and then it's over.
It's not going to listening for anything.
So let's say we would like to trigger this one.
So use our effect triggers only on numbers, right?
So if I want to have it trigger on numbers, what I will need to do is I will take this numbers and
put it array here.
So in this way I use effect only on change numbers.
So if I'll go back here, you can see here this is trigger because we render our numbers.
If I click letter, nothing happen.
If I click number, you can see this triggers on numbers.
So in this use effect, you can specify which values you will be listening for to update and use this.
So I can specify another one.
Letters.
Like that.
So at the moment I'm listening for numbers and letters changes.
So this is trigger because I have it on the first go and it's render and then number triggers letter
triggers so you can see how handy that can be if you want to update something.
So whatever you will have here and whatever change that you will have to change the data.
You can also change it based on some external factors.
For example, you fetch the API, it's getting back and you feel that then you will have a youth effect
to do it.
Or you're looking for a user input that will filled in the fields.
And once this is done, then you can do something with the data.
At the moment we have a dummy console.log here, but in here you can use whatever you want.
The options are limitless at this point because you catch the event.
It's something strange.
You have an access to this state or this state or wherever it is on this component, and you can actually
hook into the event the same way as we hook it with our class based component.
So use effect and use stage.
That's all together, all the functionality that were missing on the functional components and there
are available now.
So we can use basically the same functionality as we had on the class component in the functional.