Hello.
So now that we have done with the UAE and styling of the website.
But now what we are seeing on the browser of our website is the static data.
We have hardcoded all that data on ourselves.
So that is what we are.
We are like looking at the browser, but we don't want that to happen because we can't just rely on
the static data, hard core data for the rest of our lives.
Like whatever we have coded inside this, we can't rely on that because right now our website is completely
static.
There's no dynamic thing in that.
So it's static, whatever we call it, it's reflecting that as simple as that.
But no, we want to make our site dynamic and we want to get the details of the weather of the city
we type and of the keyword we type.
That keyword should be sent to the endpoint and the data should be fetched from the API, right?
So that is all that the site will become dynamic so that we have to make so.
And the previous thing we dialogue on and everything was done.
But that was also important.
Now we want to do the API work, so this is very important before the time to do some things, we're
getting into the API.
So we, as you know, we have captured the key word with the user, has died in the search box in this
search done wearable.
OK, so now we want to send this variable to the endpoint and the data will be disabled and all that
work will be done.
OK.
So for that, we need to add functionality to the search button because now when we click this button,
nothing happens.
Nothing actually happens.
So we want to add an on click on this function.
This is on click function.
So let me just explain what is on.
Click on Click as a function, which triggers whenever we click that particular element in which it
is embedded.
All right, so right now, turn this button, which is unclear, and we have calls on the function here,
so it will trigger as soon as we click this button.
All right.
So inside this there it expects a function which needs to be executed on clicking this button.
OK.
So right now, we don't have any function, but we will create.
So let me just name it.
Weather info.
But whether this will be the function which will be calling as soon as they use it hurts search for
them.
OK.
But before moving on to that part, we want to clear some of the things here.
Now we are going to use the.
You will defect, OK?
OK.
Next, we will be looking at the.
In-Sync functions in JavaScript and for that, for the async functions, do you need to know the promises?
And we will also be looking at to try and catch what is Brian Cage?
So we will be looking at these things.
So these are the things which we'll be looking for the so-called API and to fetch the data.
So if you don't know about this, you are if you are a beginner to JavaScript and REAC.
So I'll just tell you the basics of all this.
One by one, and if you already know and you are basic to intermediate level, but still you need some
clarification.
So that will be clear in this demonstration when I'll be teaching.
What is what?
All right.
So first of all, we'll take a look at the use of effect hook, so as other folks that use the used
it and use them or something like that.
There are so many hoops to use.
The fact is are really, really important.
OK, now it's important.
But what does it actually do?
So we'll see.
What does it do?
First of all, you need to be imported here along with the you from the REAC.
And then we will see what it does.
So let me just tell you how to rise, right to use effect.
First of all, you need to call it here, that's fine right now.
Let me explain the syntax of the use of Facebook.
So for that, you need try to use effect wherever you are calling this use effect.
So it expects a function inside this.
So you will write afectado function here.
If you don't know federal function, this is the federal function and this is a dependency at A..
All right.
So now let me explain you one by one where you write what and what is what?
OK.
So inside this use effect?
Here is what you write.
The actual code like any function here, like whatever.
Whatever you need to like, friend or something like that.
So how did you write that down stuff?
And this is the dependency era.
So like dependency is responsible for running this effect.
Like how many times this effect needs to run and start and the functions are dead?
This needs to be executed.
So this dependency rate is responsible for that.
For example, if I put a new variable.
So like here we have search term for in place of certain we might have, we might be having another
variable.
So on that or any like, for example, if I just put a search term here.
All right.
So now what, they're what is inside this, use a Coke, whatever the function is inside this, that
function will be executed so many times how many times as number of as many as four times this variable
will change its value?
You do get it.
Let me tell once again the function inside this use effect will be executed.
The number of times this variable changes.
So if this changes one time.
So this will just run once the function will run once and if it changes like whenever it changes.
So this will be updating, this function will be executing.
OK.
So inside this, there can be any code.
You can write a new function, you can write that is there, it is up to you and will take a look at
it in the order of things.
So now the main thing which needs to be kept in mind is this variable, which is responsible for executing
this function.
All right.
So now I hope it's clear as simple as that.
Very, very simple.
This is a function, and this will be rendered when this will be rendered whenever this variable changes
its value.
And what if we leave it empty?
What the dependency array is empty.
So that means that whatever the function is, that inside this use effect took, that function will
be executed when we reload the window, when we refresh the page only then only that time.
Once this effect will run and the function inside this will be executed back on.
After that, this function will not be executed and use effect will will not work.
But if you put any variable here and then the variable is like changing.
So as it changes, this function will be executed accordingly.
OK.
So that is why this is known as the dependency era.
That's why we call it dependency at because this use effect and the function inside this is dependent
on this array is dependent on the value inside the city.
So I hope this is clear to to next to will be using this use effect as we change the model, as we change
the name of the city.
As soon as you change the name of the city we want, we want things to get changed, right?
We like, for example, if the variable is delete, which is parsed based on this daily, maybe.
So when we are in the when the weather is showing of the or the weather will be different and when the
system is equal to one based on the weather of we will be different.
But like different functions need to be executed, right?
Like when then will be we will be needing the different icon for like in that need training.
So will be running will be getting the ring icon.
And if in Mumbai, it's cloudy, so we'll be needing a cloud icon.
So according to this variable, this function will execute, right?
So now I hope you understand what is the use of factor.
This is the basic thing that you can go ahead and.
You can go ahead and check on this.
The documentation is documentation or official documentation that they have given in very much detail.
What is the use effect?
Took this court through once and you will have the complete understanding of the use effect.
OK, so next we will be taking a look at using functions in the next review will be looking at async
functions and the promises.
So see you in the next video.