1
00:00:01,510 --> 00:00:03,310
Well, I think we know enough about use effect.

2
00:00:03,400 --> 00:00:07,510
So let's now try to make a request from inside of that aero function to make requests.

3
00:00:07,630 --> 00:00:10,660
We're going to need to install Axios at my terminal.

4
00:00:10,780 --> 00:00:13,600
I'm going to make sure I'm inside of my widgets project directory.

5
00:00:13,750 --> 00:00:16,060
And then I will do in NPM install Texaco's.

6
00:00:17,770 --> 00:00:19,750
All right, I'll let that do its thing while it's running.

7
00:00:19,830 --> 00:00:22,480
I got to flip back over to my file at the top.

8
00:00:22,600 --> 00:00:25,630
I'm going to import Axios from Axios.

9
00:00:26,810 --> 00:00:31,330
Now, before we make our request, we need to figure out how we should configure use effect.

10
00:00:31,880 --> 00:00:33,390
Let's clean up some of these council logs.

11
00:00:36,640 --> 00:00:41,300
And I'm going to remove that second argument from use effect for right now before we really decide how

12
00:00:41,300 --> 00:00:42,170
we should configure it.

13
00:00:42,930 --> 00:00:46,520
I want you to remember the goal of this widget that we're putting together.

14
00:00:47,150 --> 00:00:48,770
We said looking at that mockup.

15
00:00:50,990 --> 00:00:57,800
Right here, we said that we want to do a search of the Wikipedia API every single time a user presses

16
00:00:57,860 --> 00:01:00,500
a key, the immediately after user presses a key.

17
00:01:00,560 --> 00:01:01,760
We want to do a search.

18
00:01:02,120 --> 00:01:04,370
That means we're gonna make a lot of requests very quickly.

19
00:01:04,420 --> 00:01:07,040
But as I mentioned, we will try to fix that up later on.

20
00:01:07,770 --> 00:01:13,250
So how should we configure use effect to make sure that we run a request every single time?

21
00:01:13,490 --> 00:01:14,690
Our component re renders.

22
00:01:15,080 --> 00:01:17,300
And that term piece of state changes.

23
00:01:18,200 --> 00:01:19,010
Well, to do so.

24
00:01:19,990 --> 00:01:24,730
We could find use fact right here and we would put in a second argument.

25
00:01:24,880 --> 00:01:27,370
It would be an array and we would write in their term.

26
00:01:28,600 --> 00:01:35,230
So this means whenever we re render our components and the term has changed, Ron, that aero function

27
00:01:35,230 --> 00:01:35,650
right there.

28
00:01:36,250 --> 00:01:40,540
It also means that we're going to immediately run the ROV function when our components first rendered

29
00:01:40,600 --> 00:01:41,080
as well.

30
00:01:41,860 --> 00:01:45,220
So I would say that that pretty well meets the requirements of our application.

31
00:01:45,700 --> 00:01:50,110
We're going to have the opportunity to run some code right here anytime term changes.

32
00:01:52,250 --> 00:01:54,830
So I think that we can leave use effect as it is right now.

33
00:01:54,950 --> 00:01:58,280
And just go ahead and make our requests inside of you're using axios.

34
00:01:59,330 --> 00:01:59,570
All right.

35
00:01:59,750 --> 00:02:02,510
So the depend this array right here is what we want.

36
00:02:02,540 --> 00:02:03,170
That looks good.

37
00:02:03,740 --> 00:02:05,210
We need to make the request inside of here.

38
00:02:05,540 --> 00:02:09,920
Now, usually what you and I would want to do, based upon everything we've learned throughout this

39
00:02:09,920 --> 00:02:15,980
course so far, we would probably want to mark this function as async and then do a request inside of

40
00:02:15,980 --> 00:02:18,670
here with a wait axios and then some your L.

41
00:02:19,710 --> 00:02:23,820
Well, that would be great if we could do that, but unfortunately, we can't.

42
00:02:24,510 --> 00:02:26,700
There's a little requirement around use effect.

43
00:02:27,180 --> 00:02:32,460
We are not allowed to mark the function that we are passing into use effect.

44
00:02:32,520 --> 00:02:39,030
So this area function right here, we can not mark that as async and use any await keywords directly

45
00:02:39,030 --> 00:02:40,020
inside that function.

46
00:02:40,680 --> 00:02:43,980
If we tried to save this code right now and flip back over to our browser.

47
00:02:45,790 --> 00:02:49,600
You can open up your console, and if you scroll around a little bit, you're going to see a really

48
00:02:49,600 --> 00:02:51,490
long error message like this right here.

49
00:02:52,530 --> 00:02:54,330
So you can read this error message if you wish.

50
00:02:54,480 --> 00:02:59,970
It is essentially saying that we are not allowed to mark the arrow function that we are passing into

51
00:02:59,970 --> 00:03:01,800
to use effect as async.

52
00:03:03,100 --> 00:03:05,350
There are a couple of different ways we can work around this.

53
00:03:05,560 --> 00:03:07,330
So what I have right here not allowed.

54
00:03:07,540 --> 00:03:09,220
We have to use some alternative solution.

55
00:03:10,370 --> 00:03:14,680
There are in total, three different ways that we can still make a request inside of use effect.

56
00:03:14,720 --> 00:03:15,830
We can absolutely make a request.

57
00:03:15,900 --> 00:03:16,580
Don't get me wrong.

58
00:03:16,790 --> 00:03:19,850
The only requirement is we cannot mark this thing as being a sink.

59
00:03:19,940 --> 00:03:20,360
That's all.

60
00:03:21,260 --> 00:03:22,190
So to get around that.

61
00:03:22,280 --> 00:03:24,710
Let me show you the three possible solutions.

62
00:03:25,610 --> 00:03:30,320
The first solution that we can use is going to be essentially what is recommended in the air message

63
00:03:30,350 --> 00:03:30,890
right here.

64
00:03:32,150 --> 00:03:36,860
Inside of use effect, we can make a little temporary helper function.

65
00:03:37,250 --> 00:03:38,480
We could call it something like.

66
00:03:39,410 --> 00:03:44,480
Search articles or even maybe just search Wikipedia.

67
00:03:45,080 --> 00:03:45,650
Just search.

68
00:03:45,800 --> 00:03:47,450
We'll leave it really simple and straightforward.

69
00:03:48,410 --> 00:03:53,020
Now we can define a function inside of use effect and mark that one as being async.

70
00:03:53,900 --> 00:03:56,750
We can then use the await keyword inside of your as much as we wish.

71
00:03:56,820 --> 00:04:00,530
So we could call Accio Scott, get make a request and do whatever else.

72
00:04:01,130 --> 00:04:02,360
And then immediately after.

73
00:04:03,340 --> 00:04:04,390
We define that function.

74
00:04:04,600 --> 00:04:07,510
We can call it this right here is allowed.

75
00:04:08,080 --> 00:04:11,320
And if you follow this error message, it's kind of the recommended approach.

76
00:04:12,370 --> 00:04:16,870
We could save this flip back over and now we will see an error around the request because I don't have

77
00:04:16,870 --> 00:04:18,310
a real you are l inside there.

78
00:04:18,670 --> 00:04:21,280
You'll notice that we are no longer getting an air from react itself.

79
00:04:22,530 --> 00:04:28,260
That's method number one that we can use to still make use the async 08 syntax inside of async function,

80
00:04:28,260 --> 00:04:28,500
ask me.

81
00:04:28,530 --> 00:04:29,610
I use the effect function.

82
00:04:31,140 --> 00:04:35,940
Method number two is going to very similar, but you'll notice that with this approach right here,

83
00:04:35,990 --> 00:04:39,810
we are making a temporary variable and then calling it meta after.

84
00:04:40,410 --> 00:04:45,780
So in solution method number two, you're going to see this somewhat frequently in the wild on professional

85
00:04:45,780 --> 00:04:46,410
projects.

86
00:04:46,920 --> 00:04:53,880
We can remove that temporary variable altogether or move the cont search and the search invocation down

87
00:04:53,880 --> 00:04:54,150
there.

88
00:04:54,870 --> 00:04:58,140
If we just write this out, this isn't going to do anything for us.

89
00:04:58,260 --> 00:05:00,600
We've declared a function, but it doesn't get invoked.

90
00:05:01,460 --> 00:05:02,340
So to invoke it.

91
00:05:02,790 --> 00:05:05,610
We could wrap this with a set of parentheses.

92
00:05:06,650 --> 00:05:12,260
And then after the closing parentheses right here, we'll put in another set of parentheses.

93
00:05:13,330 --> 00:05:18,960
And the Syntex looks all a bit strange, but it is 100 percent valid JavaScript, this defines a function.

94
00:05:19,320 --> 00:05:21,060
And then immediately invokes it.

95
00:05:21,600 --> 00:05:24,900
So it's equivalent a hundred percent equivalent to what we just had a moment ago.

96
00:05:25,200 --> 00:05:27,600
It just removes that extra variable declaration.

97
00:05:27,690 --> 00:05:28,110
That's all.

98
00:05:28,920 --> 00:05:33,240
If you're thinking that this would be superior from a performance perspective because we're not creating

99
00:05:33,240 --> 00:05:34,170
the additional variable.

100
00:05:34,470 --> 00:05:35,460
Don't get too excited.

101
00:05:35,820 --> 00:05:40,230
The actual performance overhead of creating a variable is absolutely miniscule.

102
00:05:40,750 --> 00:05:42,960
So you would only want to take this approach right here.

103
00:05:42,960 --> 00:05:47,580
If you think the code is easier to read, do not do this because you think there is any kind of performance

104
00:05:47,580 --> 00:05:49,140
benefit or anything like that.

105
00:05:50,970 --> 00:05:52,570
Now, the third possible approach.

106
00:05:52,680 --> 00:05:57,810
So this is number two, their possible approach is to just revert back to using normal promises.

107
00:05:58,470 --> 00:06:00,000
Whenever you make a request to Axios.

108
00:06:01,510 --> 00:06:05,530
It gives us back a promise we could chain on a dot van statement.

109
00:06:06,580 --> 00:06:12,160
And this erro function right here will be invoked with the response that we get back in that API.

110
00:06:12,720 --> 00:06:16,930
And so we could do a console log of response DOT data and they would be all the information we are looking

111
00:06:16,930 --> 00:06:17,230
for.

112
00:06:18,130 --> 00:06:20,470
So those are the three possible alternatives.

113
00:06:20,830 --> 00:06:26,140
Either declare the helper function, declare a helper function and Amela invoke it, or just make use

114
00:06:26,230 --> 00:06:26,980
of promises.

115
00:06:28,450 --> 00:06:34,570
React itself, based upon that air message you just saw, pretty much recommends solution number one,

116
00:06:35,140 --> 00:06:36,320
which is this right here.

117
00:06:36,460 --> 00:06:39,630
So declare the helper function and then just call it yourself immediately.

118
00:06:40,550 --> 00:06:45,410
I would say that in the community, there's no really strong direction one way or another.

119
00:06:45,560 --> 00:06:50,180
Certainly I think promises are the least often used, but sometimes they actually are the easiest to

120
00:06:50,180 --> 00:06:50,410
use.

121
00:06:50,420 --> 00:06:54,860
To be totally honest with you, in this course, we're going to generally trend toward using this method

122
00:06:54,860 --> 00:06:55,340
right here.

123
00:06:55,400 --> 00:07:00,050
But sometimes we will swap out to using a promise if the syntax ends up being just a little bit easier

124
00:07:00,050 --> 00:07:00,650
to write out.

125
00:07:01,760 --> 00:07:01,980
OK.

126
00:07:02,060 --> 00:07:06,440
So that's how we can the three ways that we can make a request inside of use effect while still using

127
00:07:06,650 --> 00:07:09,110
some async await syntax or a promise.

128
00:07:09,780 --> 00:07:10,910
Can you really have to remember here?

129
00:07:11,120 --> 00:07:12,890
Don't try to mark that function as async.

130
00:07:12,980 --> 00:07:14,270
Otherwise, you're going to get an error.

131
00:07:15,810 --> 00:07:20,500
Well, let's take a pause right here and then put in the real you l for a request in just a moment.