1
00:00:00,390 --> 00:00:03,230
We've got basics out of the way, of course.

2
00:00:03,270 --> 00:00:10,110
Let's take a look at the more complex example where we're performing some type of data matching and

3
00:00:10,110 --> 00:00:16,380
then we have the loadings that we have the error state, and then we have the final say that if everything

4
00:00:16,380 --> 00:00:22,530
weren't successful, because otherwise you're probably thinking, well, there's probably no scenario

5
00:00:22,770 --> 00:00:28,680
where we'll be statically changing this data from true false meaning.

6
00:00:28,980 --> 00:00:31,650
Of course, I would want to do it somehow dynamically.

7
00:00:31,690 --> 00:00:39,080
And one very good use case is by setting up some type of data, which we already covered in years of

8
00:00:39,100 --> 00:00:39,360
fact.

9
00:00:39,630 --> 00:00:45,240
But of course, in this case, it is just going to be a little bit different where I would want to still

10
00:00:45,240 --> 00:00:46,020
keep my loading.

11
00:00:46,230 --> 00:00:47,430
So that stays.

12
00:00:47,430 --> 00:00:49,140
We still have our set loading.

13
00:00:49,500 --> 00:00:53,010
That also can stay on line as far as you state.

14
00:00:53,490 --> 00:00:57,870
You can go with Trull initially or you can go with files.

15
00:00:58,230 --> 00:00:59,610
That is up to you.

16
00:00:59,900 --> 00:01:01,550
In my case, I'm going to go with them.

17
00:01:02,250 --> 00:01:09,780
So initially the loading will be true and then I would want to more state values and those are going

18
00:01:09,780 --> 00:01:10,760
to be error.

19
00:01:11,160 --> 00:01:13,650
So in here also is error.

20
00:01:13,650 --> 00:01:22,290
And by the way, again, this is one of those common scenarios where a convention is to use this is

21
00:01:22,290 --> 00:01:28,890
if you have some kind of boolean online or whatever, and again, there's no rule for it is just something

22
00:01:28,890 --> 00:01:36,030
that you will see, I would say somewhat a lot more people just how this is and then whatever is the

23
00:01:36,030 --> 00:01:36,330
name.

24
00:01:36,330 --> 00:01:39,240
And then, of course, we still have our set function.

25
00:01:39,600 --> 00:01:41,940
But again, it is just the naming convention.

26
00:01:42,300 --> 00:01:44,160
If you don't want, you don't need to follow it.

27
00:01:44,400 --> 00:01:49,590
And again, we're setting up a state value and by default, error will be false.

28
00:01:49,820 --> 00:01:53,430
And let me add that is in front of the loading as well.

29
00:01:53,640 --> 00:01:54,810
So is loading.

30
00:01:55,930 --> 00:02:02,350
And then set is morning, and the last one will be yuzu, and essentially, as you can already see by

31
00:02:02,350 --> 00:02:07,330
the URL, we'll just be checking for one get Abuzer.

32
00:02:07,330 --> 00:02:12,520
And if the user exists, beautiful, we'll display some data, just some very basic data.

33
00:02:12,790 --> 00:02:17,560
And if we are loading, then, of course, we'll display one content.

34
00:02:17,770 --> 00:02:20,200
Then if there is now, there's going to be another content.

35
00:02:20,210 --> 00:02:26,110
And eventually, if there is a user, then of course everything is great and the user will be displayed.

36
00:02:26,500 --> 00:02:34,180
And in here we'll have a set user and then use state and we'll go with default user.

37
00:02:34,420 --> 00:02:34,840
Awesome.

38
00:02:35,350 --> 00:02:40,780
Now, like I just said, will be performing efforts request and we already know that we would need a

39
00:02:40,780 --> 00:02:40,990
user.

40
00:02:41,380 --> 00:02:42,600
That's why it is important.

41
00:02:43,000 --> 00:02:49,900
But before we do anything, let's just decide well what we're going to display based on those values.

42
00:02:50,290 --> 00:02:53,890
And we start by loading and we'll see if.

43
00:02:54,810 --> 00:03:01,350
Is loading Astro Van just the showcase that we can add way more than just heading to, I'll just place

44
00:03:01,350 --> 00:03:02,280
a dare again.

45
00:03:02,280 --> 00:03:07,580
Let's just signals that you can have as big of a return you would want over here.

46
00:03:07,950 --> 00:03:10,880
So it just right loading and then dot, dot, dot.

47
00:03:11,100 --> 00:03:13,930
So that happens if the loading is true.

48
00:03:14,370 --> 00:03:16,440
Now, in this case, we also have the Izarra.

49
00:03:16,440 --> 00:03:16,900
Correct.

50
00:03:17,190 --> 00:03:19,410
So here we go is error.

51
00:03:19,780 --> 00:03:27,420
And again, I'll just skip a little bit by copying pasting and now say there was an error or error,

52
00:03:28,110 --> 00:03:32,330
something that was nice and short and sweet.

53
00:03:32,820 --> 00:03:35,040
So let's say that, of course, now we have loading.

54
00:03:35,040 --> 00:03:35,900
Why now?

55
00:03:35,930 --> 00:03:36,720
Because this is true.

56
00:03:36,870 --> 00:03:37,310
Correct.

57
00:03:37,560 --> 00:03:40,260
And then as far as they are, it is false to begin with.

58
00:03:40,560 --> 00:03:43,040
And then eventually we have the default cache.

59
00:03:43,500 --> 00:03:50,010
So if there is no loading, if there's no error, then of course I would want to display my user, which

60
00:03:50,010 --> 00:03:57,570
simply will be a div somewhere online where we have the heading one.

61
00:03:58,230 --> 00:04:06,060
I'll just display the user so you can probably already guess that if I set my loading to be false.

62
00:04:07,180 --> 00:04:13,330
Now, none of the first conditions are met, so we just go with the defalcation where we display our

63
00:04:13,330 --> 00:04:18,590
user, but the moment loading will be true and of course, it will be displayed.

64
00:04:19,030 --> 00:04:19,730
So that is good.

65
00:04:19,960 --> 00:04:21,690
That is going to be our return.

66
00:04:21,970 --> 00:04:28,620
So now let's set up our request in the use effect where we will control our conditions.

67
00:04:28,900 --> 00:04:31,180
So let's go with use fact.

68
00:04:31,480 --> 00:04:34,480
Let's pass in the callback function now right away.

69
00:04:34,490 --> 00:04:35,740
Set up a second argument.

70
00:04:35,930 --> 00:04:36,760
I recovered.

71
00:04:36,760 --> 00:04:37,680
Why we using it.

72
00:04:37,870 --> 00:04:43,300
So please, if you need to go back, go back to the last video of usufruct where we covered that in

73
00:04:43,300 --> 00:04:46,480
detail because I don't want to repeat myself all right away.

74
00:04:46,930 --> 00:04:52,240
This empty array, meaning it will just run once and once we do it.

75
00:04:52,240 --> 00:04:53,200
Let's run.

76
00:04:53,200 --> 00:04:55,530
Futch, let's go with you URL.

77
00:04:55,570 --> 00:05:00,420
As you can see, in this case, I'm not using as in Kuwait and I'm typing everything within a callback

78
00:05:00,420 --> 00:05:02,650
question just to showcase that.

79
00:05:02,650 --> 00:05:06,460
As always, you have multiple ways how you can achieve the same thing.

80
00:05:06,820 --> 00:05:11,440
So you don't think that you always need to use a separate function that is incorrect.

81
00:05:11,650 --> 00:05:16,660
Now, that is my preference because I find the syntax to be more straightforward, but you don't have

82
00:05:16,660 --> 00:05:16,860
to.

83
00:05:17,110 --> 00:05:23,410
And then we know that with which we have done then, because, of course, we are getting back the promise

84
00:05:23,680 --> 00:05:26,880
and then we still need to go with our Jason.

85
00:05:27,220 --> 00:05:28,630
So let's go the response.

86
00:05:29,650 --> 00:05:38,350
And now I would want to return response, Jason, online also, I could set up a catch and if there

87
00:05:38,350 --> 00:05:46,960
is error, let's just start by logging the error and there's going to be a little bit of code in here,

88
00:05:47,440 --> 00:05:50,580
because as far as the fetch, it has a gotcha.

89
00:05:50,950 --> 00:05:53,980
So now at the moment, we fetch everything, we return.

90
00:05:53,980 --> 00:05:55,450
Drayson Beautiful.

91
00:05:55,690 --> 00:05:58,340
Well, what are we doing after that?

92
00:05:58,720 --> 00:06:05,400
Well, in between we'll set up another dart event and here we should have the user.

93
00:06:05,830 --> 00:06:10,120
So let's set up our function again, user for the time being.

94
00:06:10,540 --> 00:06:13,510
Let's just log whether we're getting the user.

95
00:06:14,080 --> 00:06:15,040
So let's say right here.

96
00:06:16,450 --> 00:06:24,900
And that if we inspect, we should see a user and of course we do, so that is our object.

97
00:06:25,690 --> 00:06:29,050
So we successfully set up a request.

98
00:06:29,680 --> 00:06:34,360
So now the question is how we can start operating with these values?

99
00:06:35,080 --> 00:06:40,140
Well, first, we need to understand when are we calling this function?

100
00:06:40,630 --> 00:06:49,510
So in my case, if I set loading right away to tomorrow when I would want to change it, well, I guess

101
00:06:49,510 --> 00:06:52,160
when I get my data correct.

102
00:06:52,480 --> 00:06:58,480
So once I successfully have my user, then of course I am good to go.

103
00:06:59,360 --> 00:07:06,580
Now, if, of course, the user doesn't exist, then it's going to be a different ballgame shown here.

104
00:07:06,590 --> 00:07:09,020
Let's add curly braces like so.

105
00:07:09,410 --> 00:07:15,320
And now let's just set up a user first and then let's hide that loading.

106
00:07:15,710 --> 00:07:20,420
Now, I already know that user will be here in the logging.

107
00:07:21,240 --> 00:07:23,910
That's what I would want to actually display.

108
00:07:24,230 --> 00:07:30,980
So since the user is an object, I'll just seconds and then I'll be looking for logging that is coming

109
00:07:30,980 --> 00:07:31,910
from the user.

110
00:07:32,210 --> 00:07:33,830
And then I have two functions.

111
00:07:34,310 --> 00:07:38,980
I have set the user and then I have set loading.

112
00:07:39,380 --> 00:07:43,560
So since my initial loading is true, since it is shown.

113
00:07:43,760 --> 00:07:50,630
Now, of course once I have the user, then I would want to hide the first alstrup set user and I'll

114
00:07:50,630 --> 00:07:51,780
pass in my login.

115
00:07:52,070 --> 00:07:53,590
That's the only thing that I'm looking for.

116
00:07:53,870 --> 00:07:56,600
And then the second thing is set is loading.

117
00:07:56,870 --> 00:08:02,660
And now of course, I would want to set it equal to false y well, because I have my data correct.

118
00:08:03,020 --> 00:08:04,700
Instead of default user.

119
00:08:05,060 --> 00:08:12,710
Now I have my login, now I have the name of my user and then once I set the login then of course I

120
00:08:12,710 --> 00:08:15,030
can right away call set is loading.

121
00:08:15,800 --> 00:08:21,650
So once we'll save will notice that we'll have our initial state of loading.

122
00:08:22,280 --> 00:08:28,850
And then once we have our data, everything is exactly like we expected.

123
00:08:29,390 --> 00:08:36,350
OK, so that's the first thing that we can do with multiple returns where we have a loading site which

124
00:08:36,350 --> 00:08:42,770
is either displayed right from the get go or another way you could do it like this where you say false.

125
00:08:43,140 --> 00:08:44,870
So technically it's not displayed.

126
00:08:44,870 --> 00:08:53,380
But when you set up your fetch or right before, I guess we can set up loading, that is true.

127
00:08:53,420 --> 00:08:55,780
So that is another option that you can do.

128
00:08:56,150 --> 00:08:57,000
So let's go here.

129
00:08:57,020 --> 00:08:59,510
That is loading and we'll set it equal to true.

130
00:08:59,750 --> 00:09:05,240
And now what you'll notice first again, we have this for split second loading and then, of course,

131
00:09:05,240 --> 00:09:07,490
eventually we change the state.

132
00:09:07,820 --> 00:09:10,670
We say set is loading is actually equal to false.

133
00:09:11,000 --> 00:09:17,300
And then, of course, instead of is loading, which was true in the beginning, now we just go with

134
00:09:17,300 --> 00:09:18,190
our default one.

135
00:09:18,590 --> 00:09:20,480
OK, hopefully that is clear.

136
00:09:20,510 --> 00:09:23,270
Now, again, I'm just going to go by default.

137
00:09:23,480 --> 00:09:24,650
Cerita True.

138
00:09:24,980 --> 00:09:31,760
And then here I said set e loading defaults, which is remember, you have this option as well.

139
00:09:31,970 --> 00:09:38,120
Now, if you want to see that loading for longer, the only thing you need to do is just go to new window

140
00:09:38,330 --> 00:09:41,780
Vinograd or start a localhost and learn.

141
00:09:41,780 --> 00:09:43,850
I'm going to go with three thousand.

142
00:09:44,510 --> 00:09:49,730
And in here we can just slow down the network a little bit just so you can see.

143
00:09:50,210 --> 00:09:59,060
And we do that in network and I'm going to be looking for 3G, the first one on line once I refresh.

144
00:09:59,390 --> 00:10:02,450
Now there's going to be a loading dot, dot, dot, dot, dot.

145
00:10:02,630 --> 00:10:06,710
And then once we get the data, then of course we flip it.

146
00:10:07,040 --> 00:10:08,180
Hopefully this is clear.

147
00:10:08,420 --> 00:10:13,460
As you can see, it's not like every time we'll just do that manually changing these values.

148
00:10:13,790 --> 00:10:15,970
Notice how this is happening dynamically.

149
00:10:16,340 --> 00:10:24,920
Now, one problem with a fetch is that when you talk about this error, essentially you are not talking

150
00:10:24,920 --> 00:10:26,150
about four or four.

151
00:10:26,150 --> 00:10:29,230
For example, you're talking about the network.

152
00:10:30,200 --> 00:10:36,770
So when I'm trying to say is if I'll add here as well, technically that kind of user doesn't exist,

153
00:10:36,950 --> 00:10:40,310
but it is not going to trigger my error over here.

154
00:10:40,880 --> 00:10:49,010
OK, and this is why we'll have to do a little bit of dancing around where when we are getting the JSON

155
00:10:49,010 --> 00:10:54,770
right before that, essentially will check what is the status of our response.

156
00:10:54,800 --> 00:11:03,290
Again, this has nothing to do with react and has to do with fetch where as far as built in functionality,

157
00:11:03,410 --> 00:11:10,560
it doesn't trigger the error if the status is four or four, which means that there is no such user.

158
00:11:10,850 --> 00:11:17,600
So how we would fix it, like I said we would set up over here is because there's going to be a bit

159
00:11:17,600 --> 00:11:18,710
more functionality.

160
00:11:19,010 --> 00:11:24,530
So within the calibrations, I will check what is the status of my response.

161
00:11:24,920 --> 00:11:31,430
And if the status is between two hundred and then three hundred, then I would want to return JSON because

162
00:11:31,430 --> 00:11:32,690
I know that everything is correct.

163
00:11:32,840 --> 00:11:39,210
However, if the status is not between two and three hundred, then of course I will throw the error.

164
00:11:39,470 --> 00:11:42,920
So then eventually I'll call this set is error again.

165
00:11:43,610 --> 00:11:49,820
For example, with Axios you would have a different setup because AXA's deals with those kind of errors.

166
00:11:49,820 --> 00:11:56,960
But as far as Futch, when you talk about Kuch, you're not catching here for or for the not fun.

167
00:11:57,140 --> 00:11:58,790
You're just catching the network.

168
00:11:59,240 --> 00:12:05,270
That's why we're doing this whole setup, and like I said, I'll go with the response and then status

169
00:12:05,630 --> 00:12:11,030
and I'll see if it is bigger or equal to two hundred.

170
00:12:11,510 --> 00:12:20,720
And let's do the and operator response and status status and less than two hundred ninety nine.

171
00:12:21,270 --> 00:12:22,610
So two hundred ninety nine.

172
00:12:22,940 --> 00:12:26,600
If that is the case then I would want to return my Jason.

173
00:12:26,900 --> 00:12:32,440
So say he return and I'll look for response and then Jason.

174
00:12:32,870 --> 00:12:39,350
So if that is the case, how or if it is not a case, if it is for or for like we have over here, then

175
00:12:39,350 --> 00:12:41,840
I'll set up my house again.

176
00:12:41,840 --> 00:12:48,170
I'll have to set is lowering to force because initially in my case it is true.

177
00:12:49,120 --> 00:12:52,000
That next we would need to set is.

178
00:12:52,450 --> 00:12:57,820
So now, of course, I would want to trigger that state set is here and now.

179
00:12:57,820 --> 00:13:00,550
Of course we are setting it equal to zero.

180
00:13:00,910 --> 00:13:07,810
So now we can already guess that where we have these multiple returns, this will meet this condition.

181
00:13:08,410 --> 00:13:10,890
So is error now will be true.

182
00:13:11,380 --> 00:13:11,780
Correct.

183
00:13:12,250 --> 00:13:16,150
And once that is the case, we should see this error that up.

184
00:13:16,420 --> 00:13:21,280
And then again, it's not a reacting, but I'll also throw the error.

185
00:13:21,430 --> 00:13:29,770
So I'll say here, throw knew an error and I'll go with response and then statistics.

186
00:13:30,100 --> 00:13:32,860
Usually that's where we can find more info.

187
00:13:33,140 --> 00:13:34,440
Of course, this is not correct.

188
00:13:34,450 --> 00:13:35,840
It needs to be error.

189
00:13:36,220 --> 00:13:39,640
And once we save notice, now we have the error.

190
00:13:39,910 --> 00:13:40,870
So we have error.

191
00:13:40,920 --> 00:13:43,600
DataDot So first we were loading.

192
00:13:43,900 --> 00:13:47,380
You can clearly see that once I refresh or split second we're loading.

193
00:13:47,800 --> 00:13:56,260
And then since our YORO is incorrect, since there is no user, we are hearing the error, of course.

194
00:13:56,620 --> 00:14:01,900
And then since we're hitting the error now, we're displaying Dev and not having one with error.

195
00:14:02,110 --> 00:14:03,040
Dot, dot, dot.

196
00:14:03,250 --> 00:14:08,320
And as a side note, of course you can place here spinner's or whatever you would want.

197
00:14:08,650 --> 00:14:13,360
So once we start working on more interesting projects, you'll see how that works as well.

198
00:14:13,660 --> 00:14:20,590
But essentially the main idea is following where we can have multiple states and then depending on that

199
00:14:20,590 --> 00:14:22,970
state, we are setting up the returns.

200
00:14:22,990 --> 00:14:27,550
Again, keep in mind, you can return different components.

201
00:14:27,910 --> 00:14:33,650
You can return a bunch of HDMI elements or whatever you want.

202
00:14:34,060 --> 00:14:37,200
This is just a most basic example.

203
00:14:37,660 --> 00:14:39,370
OK, hopefully that is clear.

204
00:14:39,880 --> 00:14:43,180
Let me go back to a proper user.

205
00:14:43,390 --> 00:14:47,140
And now, as you can see, I first have the loading.

206
00:14:47,710 --> 00:14:54,640
Then since there is no error, I'm just setting up the user and removing the loading because I said

207
00:14:54,660 --> 00:14:57,580
that is loading equal to false.