1
00:00:00,450 --> 00:00:00,840
Hello.

2
00:00:01,350 --> 00:00:05,040
So now that we have done with the UAE and styling of the website.

3
00:00:05,520 --> 00:00:11,670
But now what we are seeing on the browser of our website is the static data.

4
00:00:12,060 --> 00:00:14,970
We have hardcoded all that data on ourselves.

5
00:00:15,240 --> 00:00:16,890
So that is what we are.

6
00:00:17,250 --> 00:00:23,730
We are like looking at the browser, but we don't want that to happen because we can't just rely on

7
00:00:23,730 --> 00:00:26,640
the static data, hard core data for the rest of our lives.

8
00:00:27,030 --> 00:00:32,880
Like whatever we have coded inside this, we can't rely on that because right now our website is completely

9
00:00:32,880 --> 00:00:33,420
static.

10
00:00:33,820 --> 00:00:35,310
There's no dynamic thing in that.

11
00:00:35,640 --> 00:00:40,410
So it's static, whatever we call it, it's reflecting that as simple as that.

12
00:00:40,800 --> 00:00:49,800
But no, we want to make our site dynamic and we want to get the details of the weather of the city

13
00:00:49,800 --> 00:00:52,410
we type and of the keyword we type.

14
00:00:52,410 --> 00:00:57,180
That keyword should be sent to the endpoint and the data should be fetched from the API, right?

15
00:00:58,200 --> 00:01:03,600
So that is all that the site will become dynamic so that we have to make so.

16
00:01:04,740 --> 00:01:08,940
And the previous thing we dialogue on and everything was done.

17
00:01:09,400 --> 00:01:10,890
But that was also important.

18
00:01:10,920 --> 00:01:16,650
Now we want to do the API work, so this is very important before the time to do some things, we're

19
00:01:16,650 --> 00:01:17,880
getting into the API.

20
00:01:18,420 --> 00:01:25,620
So we, as you know, we have captured the key word with the user, has died in the search box in this

21
00:01:25,980 --> 00:01:27,840
search done wearable.

22
00:01:27,870 --> 00:01:34,080
OK, so now we want to send this variable to the endpoint and the data will be disabled and all that

23
00:01:34,080 --> 00:01:34,830
work will be done.

24
00:01:35,370 --> 00:01:35,700
OK.

25
00:01:35,970 --> 00:01:42,000
So for that, we need to add functionality to the search button because now when we click this button,

26
00:01:42,420 --> 00:01:43,260
nothing happens.

27
00:01:43,530 --> 00:01:44,970
Nothing actually happens.

28
00:01:45,270 --> 00:01:48,320
So we want to add an on click on this function.

29
00:01:48,340 --> 00:01:49,590
This is on click function.

30
00:01:49,600 --> 00:01:51,420
So let me just explain what is on.

31
00:01:51,420 --> 00:02:00,270
Click on Click as a function, which triggers whenever we click that particular element in which it

32
00:02:00,270 --> 00:02:00,780
is embedded.

33
00:02:00,780 --> 00:02:06,240
All right, so right now, turn this button, which is unclear, and we have calls on the function here,

34
00:02:06,690 --> 00:02:09,840
so it will trigger as soon as we click this button.

35
00:02:09,870 --> 00:02:10,160
All right.

36
00:02:10,560 --> 00:02:18,220
So inside this there it expects a function which needs to be executed on clicking this button.

37
00:02:18,240 --> 00:02:18,540
OK.

38
00:02:19,860 --> 00:02:22,230
So right now, we don't have any function, but we will create.

39
00:02:22,240 --> 00:02:23,820
So let me just name it.

40
00:02:26,900 --> 00:02:27,740
Weather info.

41
00:02:32,020 --> 00:02:37,870
But whether this will be the function which will be calling as soon as they use it hurts search for

42
00:02:37,870 --> 00:02:38,050
them.

43
00:02:38,590 --> 00:02:39,110
OK.

44
00:02:39,160 --> 00:02:44,350
But before moving on to that part, we want to clear some of the things here.

45
00:02:44,860 --> 00:02:47,440
Now we are going to use the.

46
00:02:49,140 --> 00:02:50,240
You will defect, OK?

47
00:02:51,170 --> 00:02:51,540
OK.

48
00:02:52,290 --> 00:02:54,990
Next, we will be looking at the.

49
00:02:56,650 --> 00:03:04,840
In-Sync functions in JavaScript and for that, for the async functions, do you need to know the promises?

50
00:03:06,550 --> 00:03:13,750
And we will also be looking at to try and catch what is Brian Cage?

51
00:03:14,320 --> 00:03:15,940
So we will be looking at these things.

52
00:03:15,940 --> 00:03:22,840
So these are the things which we'll be looking for the so-called API and to fetch the data.

53
00:03:23,350 --> 00:03:28,930
So if you don't know about this, you are if you are a beginner to JavaScript and REAC.

54
00:03:29,320 --> 00:03:32,290
So I'll just tell you the basics of all this.

55
00:03:32,680 --> 00:03:39,610
One by one, and if you already know and you are basic to intermediate level, but still you need some

56
00:03:39,610 --> 00:03:40,300
clarification.

57
00:03:40,300 --> 00:03:45,640
So that will be clear in this demonstration when I'll be teaching.

58
00:03:46,520 --> 00:03:47,180
What is what?

59
00:03:48,430 --> 00:03:48,850
All right.

60
00:03:49,060 --> 00:03:57,220
So first of all, we'll take a look at the use of effect hook, so as other folks that use the used

61
00:03:57,440 --> 00:03:59,230
it and use them or something like that.

62
00:03:59,490 --> 00:04:00,910
There are so many hoops to use.

63
00:04:00,910 --> 00:04:02,750
The fact is are really, really important.

64
00:04:03,000 --> 00:04:05,980
OK, now it's important.

65
00:04:05,980 --> 00:04:07,870
But what does it actually do?

66
00:04:08,680 --> 00:04:10,870
So we'll see.

67
00:04:10,900 --> 00:04:11,660
What does it do?

68
00:04:11,680 --> 00:04:15,820
First of all, you need to be imported here along with the you from the REAC.

69
00:04:17,410 --> 00:04:19,720
And then we will see what it does.

70
00:04:20,880 --> 00:04:25,380
So let me just tell you how to rise, right to use effect.

71
00:04:25,980 --> 00:04:28,890
First of all, you need to call it here, that's fine right now.

72
00:04:28,900 --> 00:04:32,090
Let me explain the syntax of the use of Facebook.

73
00:04:32,460 --> 00:04:38,570
So for that, you need try to use effect wherever you are calling this use effect.

74
00:04:38,580 --> 00:04:41,080
So it expects a function inside this.

75
00:04:41,080 --> 00:04:43,680
So you will write afectado function here.

76
00:04:45,640 --> 00:04:53,590
If you don't know federal function, this is the federal function and this is a dependency at A..

77
00:04:54,220 --> 00:04:54,640
All right.

78
00:04:55,330 --> 00:05:00,190
So now let me explain you one by one where you write what and what is what?

79
00:05:00,220 --> 00:05:00,610
OK.

80
00:05:01,030 --> 00:05:03,820
So inside this use effect?

81
00:05:04,690 --> 00:05:06,600
Here is what you write.

82
00:05:06,610 --> 00:05:10,390
The actual code like any function here, like whatever.

83
00:05:12,160 --> 00:05:16,360
Whatever you need to like, friend or something like that.

84
00:05:16,720 --> 00:05:19,480
So how did you write that down stuff?

85
00:05:19,960 --> 00:05:22,500
And this is the dependency era.

86
00:05:23,260 --> 00:05:29,020
So like dependency is responsible for running this effect.

87
00:05:29,800 --> 00:05:34,600
Like how many times this effect needs to run and start and the functions are dead?

88
00:05:34,960 --> 00:05:36,610
This needs to be executed.

89
00:05:36,610 --> 00:05:39,400
So this dependency rate is responsible for that.

90
00:05:39,760 --> 00:05:42,700
For example, if I put a new variable.

91
00:05:43,150 --> 00:05:49,150
So like here we have search term for in place of certain we might have, we might be having another

92
00:05:49,150 --> 00:05:49,530
variable.

93
00:05:50,080 --> 00:05:54,130
So on that or any like, for example, if I just put a search term here.

94
00:05:55,640 --> 00:05:55,960
All right.

95
00:05:56,300 --> 00:06:04,360
So now what, they're what is inside this, use a Coke, whatever the function is inside this, that

96
00:06:04,370 --> 00:06:14,210
function will be executed so many times how many times as number of as many as four times this variable

97
00:06:14,210 --> 00:06:15,800
will change its value?

98
00:06:16,580 --> 00:06:17,170
You do get it.

99
00:06:17,330 --> 00:06:22,970
Let me tell once again the function inside this use effect will be executed.

100
00:06:24,070 --> 00:06:27,440
The number of times this variable changes.

101
00:06:27,950 --> 00:06:30,380
So if this changes one time.

102
00:06:30,500 --> 00:06:38,900
So this will just run once the function will run once and if it changes like whenever it changes.

103
00:06:38,900 --> 00:06:43,340
So this will be updating, this function will be executing.

104
00:06:43,550 --> 00:06:43,970
OK.

105
00:06:45,020 --> 00:06:47,180
So inside this, there can be any code.

106
00:06:47,180 --> 00:06:52,340
You can write a new function, you can write that is there, it is up to you and will take a look at

107
00:06:52,520 --> 00:06:54,410
it in the order of things.

108
00:06:54,770 --> 00:07:01,940
So now the main thing which needs to be kept in mind is this variable, which is responsible for executing

109
00:07:01,940 --> 00:07:03,020
this function.

110
00:07:03,470 --> 00:07:03,890
All right.

111
00:07:04,040 --> 00:07:06,850
So now I hope it's clear as simple as that.

112
00:07:06,860 --> 00:07:07,850
Very, very simple.

113
00:07:08,030 --> 00:07:13,880
This is a function, and this will be rendered when this will be rendered whenever this variable changes

114
00:07:13,880 --> 00:07:14,570
its value.

115
00:07:14,750 --> 00:07:17,330
And what if we leave it empty?

116
00:07:17,330 --> 00:07:20,960
What the dependency array is empty.

117
00:07:21,140 --> 00:07:26,390
So that means that whatever the function is, that inside this use effect took, that function will

118
00:07:26,390 --> 00:07:33,920
be executed when we reload the window, when we refresh the page only then only that time.

119
00:07:33,920 --> 00:07:38,960
Once this effect will run and the function inside this will be executed back on.

120
00:07:38,960 --> 00:07:44,510
After that, this function will not be executed and use effect will will not work.

121
00:07:45,290 --> 00:07:51,320
But if you put any variable here and then the variable is like changing.

122
00:07:51,330 --> 00:07:56,690
So as it changes, this function will be executed accordingly.

123
00:07:56,960 --> 00:07:57,290
OK.

124
00:07:57,440 --> 00:08:00,110
So that is why this is known as the dependency era.

125
00:08:00,120 --> 00:08:07,010
That's why we call it dependency at because this use effect and the function inside this is dependent

126
00:08:07,010 --> 00:08:10,580
on this array is dependent on the value inside the city.

127
00:08:10,940 --> 00:08:20,210
So I hope this is clear to to next to will be using this use effect as we change the model, as we change

128
00:08:20,210 --> 00:08:21,800
the name of the city.

129
00:08:22,010 --> 00:08:27,110
As soon as you change the name of the city we want, we want things to get changed, right?

130
00:08:27,380 --> 00:08:32,990
We like, for example, if the variable is delete, which is parsed based on this daily, maybe.

131
00:08:33,320 --> 00:08:40,220
So when we are in the when the weather is showing of the or the weather will be different and when the

132
00:08:40,220 --> 00:08:43,100
system is equal to one based on the weather of we will be different.

133
00:08:43,460 --> 00:08:46,040
But like different functions need to be executed, right?

134
00:08:46,280 --> 00:08:54,680
Like when then will be we will be needing the different icon for like in that need training.

135
00:08:54,680 --> 00:08:58,730
So will be running will be getting the ring icon.

136
00:08:59,120 --> 00:09:02,690
And if in Mumbai, it's cloudy, so we'll be needing a cloud icon.

137
00:09:02,930 --> 00:09:05,620
So according to this variable, this function will execute, right?

138
00:09:05,670 --> 00:09:08,960
So now I hope you understand what is the use of factor.

139
00:09:09,350 --> 00:09:12,470
This is the basic thing that you can go ahead and.

140
00:09:13,490 --> 00:09:15,470
You can go ahead and check on this.

141
00:09:16,280 --> 00:09:22,210
The documentation is documentation or official documentation that they have given in very much detail.

142
00:09:22,220 --> 00:09:23,120
What is the use effect?

143
00:09:23,120 --> 00:09:29,040
Took this court through once and you will have the complete understanding of the use effect.

144
00:09:29,150 --> 00:09:36,200
OK, so next we will be taking a look at using functions in the next review will be looking at async

145
00:09:36,200 --> 00:09:37,880
functions and the promises.

146
00:09:38,270 --> 00:09:39,410
So see you in the next video.