Well, I think we know enough about use effect.
So let's now try to make a request from inside of that aero function to make requests.
We're going to need to install Axios at my terminal.
I'm going to make sure I'm inside of my widgets project directory.
And then I will do in NPM install Texaco's.
All right, I'll let that do its thing while it's running.
I got to flip back over to my file at the top.
I'm going to import Axios from Axios.
Now, before we make our request, we need to figure out how we should configure use effect.
Let's clean up some of these council logs.
And I'm going to remove that second argument from use effect for right now before we really decide how
we should configure it.
I want you to remember the goal of this widget that we're putting together.
We said looking at that mockup.
Right here, we said that we want to do a search of the Wikipedia API every single time a user presses
a key, the immediately after user presses a key.
We want to do a search.
That means we're gonna make a lot of requests very quickly.
But as I mentioned, we will try to fix that up later on.
So how should we configure use effect to make sure that we run a request every single time?
Our component re renders.
And that term piece of state changes.
Well, to do so.
We could find use fact right here and we would put in a second argument.
It would be an array and we would write in their term.
So this means whenever we re render our components and the term has changed, Ron, that aero function
right there.
It also means that we're going to immediately run the ROV function when our components first rendered
as well.
So I would say that that pretty well meets the requirements of our application.
We're going to have the opportunity to run some code right here anytime term changes.
So I think that we can leave use effect as it is right now.
And just go ahead and make our requests inside of you're using axios.
All right.
So the depend this array right here is what we want.
That looks good.
We need to make the request inside of here.
Now, usually what you and I would want to do, based upon everything we've learned throughout this
course so far, we would probably want to mark this function as async and then do a request inside of
here with a wait axios and then some your L.
Well, that would be great if we could do that, but unfortunately, we can't.
There's a little requirement around use effect.
We are not allowed to mark the function that we are passing into use effect.
So this area function right here, we can not mark that as async and use any await keywords directly
inside that function.
If we tried to save this code right now and flip back over to our browser.
You can open up your console, and if you scroll around a little bit, you're going to see a really
long error message like this right here.
So you can read this error message if you wish.
It is essentially saying that we are not allowed to mark the arrow function that we are passing into
to use effect as async.
There are a couple of different ways we can work around this.
So what I have right here not allowed.
We have to use some alternative solution.
There are in total, three different ways that we can still make a request inside of use effect.
We can absolutely make a request.
Don't get me wrong.
The only requirement is we cannot mark this thing as being a sink.
That's all.
So to get around that.
Let me show you the three possible solutions.
The first solution that we can use is going to be essentially what is recommended in the air message
right here.
Inside of use effect, we can make a little temporary helper function.
We could call it something like.
Search articles or even maybe just search Wikipedia.
Just search.
We'll leave it really simple and straightforward.
Now we can define a function inside of use effect and mark that one as being async.
We can then use the await keyword inside of your as much as we wish.
So we could call Accio Scott, get make a request and do whatever else.
And then immediately after.
We define that function.
We can call it this right here is allowed.
And if you follow this error message, it's kind of the recommended approach.
We could save this flip back over and now we will see an error around the request because I don't have
a real you are l inside there.
You'll notice that we are no longer getting an air from react itself.
That's method number one that we can use to still make use the async 08 syntax inside of async function,
ask me.
I use the effect function.
Method number two is going to very similar, but you'll notice that with this approach right here,
we are making a temporary variable and then calling it meta after.
So in solution method number two, you're going to see this somewhat frequently in the wild on professional
projects.
We can remove that temporary variable altogether or move the cont search and the search invocation down
there.
If we just write this out, this isn't going to do anything for us.
We've declared a function, but it doesn't get invoked.
So to invoke it.
We could wrap this with a set of parentheses.
And then after the closing parentheses right here, we'll put in another set of parentheses.
And the Syntex looks all a bit strange, but it is 100 percent valid JavaScript, this defines a function.
And then immediately invokes it.
So it's equivalent a hundred percent equivalent to what we just had a moment ago.
It just removes that extra variable declaration.
That's all.
If you're thinking that this would be superior from a performance perspective because we're not creating
the additional variable.
Don't get too excited.
The actual performance overhead of creating a variable is absolutely miniscule.
So you would only want to take this approach right here.
If you think the code is easier to read, do not do this because you think there is any kind of performance
benefit or anything like that.
Now, the third possible approach.
So this is number two, their possible approach is to just revert back to using normal promises.
Whenever you make a request to Axios.
It gives us back a promise we could chain on a dot van statement.
And this erro function right here will be invoked with the response that we get back in that API.
And so we could do a console log of response DOT data and they would be all the information we are looking
for.
So those are the three possible alternatives.
Either declare the helper function, declare a helper function and Amela invoke it, or just make use
of promises.
React itself, based upon that air message you just saw, pretty much recommends solution number one,
which is this right here.
So declare the helper function and then just call it yourself immediately.
I would say that in the community, there's no really strong direction one way or another.
Certainly I think promises are the least often used, but sometimes they actually are the easiest to
use.
To be totally honest with you, in this course, we're going to generally trend toward using this method
right here.
But sometimes we will swap out to using a promise if the syntax ends up being just a little bit easier
to write out.
OK.
So that's how we can the three ways that we can make a request inside of use effect while still using
some async await syntax or a promise.
Can you really have to remember here?
Don't try to mark that function as async.
Otherwise, you're going to get an error.
Well, let's take a pause right here and then put in the real you l for a request in just a moment.