All language subtitles for 051 useEffect - Fetch Data.en_US

Nice honor once we have covered all the issues, the fact works.

Now let's put it to good use and let's see how we can fetch data using a use effect.

And first, what I would want you to do is in the app Jass, change the import a little bit.

Now, I don't think I'll change the name, but we're going to go with usufruct again and we're looking

for the final in this case.

And let's look for use of fact, which data file and once it renders, you'll notice a bunch of GitHub

users.

So essentially, this is what we're trying to create, where there's going to be some title and we'll

just get some default GitHub users.

And of course, we'll do that using use.

So now let's change it around to a set up.

So instead of the final folder, we're looking for the setup and we should see on screen data, that's

the one that we're looking for.

I think I can close the console.

It's not going to be necessary.

And let's navigate to fresh data I already provided of the URL.

If you want to double check what you're going to get back, you can just copy that and navigate your

browser.

Copy and paste browser will perform a good request.

And as you can see, essentially you will get a array of objects online in each and every object.

We have info about the get up users and I believe we're getting 30.

But don't quote me on that.

I might be wrong, but I believe there's three.

So once we have this particular set up now, of course, let's work on our component where I think I

would want to start by setting up some kind of state value.

Again, we have to use that.

So let's set up the users.

I'm going to go with const and users now.

I will need a set user's function as well so that users here and that is going to be equal to use state.

And then let's start with an empty array.

That is going to be my default setup then, of course, and the return that's also add some kind of

hitting three think this is where all our users eventually or below it, we're going to go here with

GitHub users.

All right, that's a good start, and then now let's set up our usufruct, so I'll set up my hook.

So use AFACT and then I'll have my callback function.

Of course, within the callback function, what I would want is to perform a feature request.

Now we have multiple scenarios.

We can set up the function here so you can just start typing away.

That is always an option or you can set up a separate function.

So in my case, I'm going to go with separate function for a very simple reason that I'm going to use

a single word.

And that is one more rule that I would want to mention that you cannot you cannot make this function

async wait for a simple reason that remember async await returns.

What it returns a promise.

Correct.

So if I say here, a sink right here, it is going to be an issue.

OK, this will work.

There's going to be a big fat error because you usufruct cannot be async, it cannot return promise.

Because remember in the previous video we talked about that clean up function.

So usufruct is looking for that, not for the promise.

That's why you can either set up async, avoid inside the callback function, or you can just set it

up as a separate function, which is exactly what I'm going to do.

So I'm going to go here with Karns and then I'll call this get users.

Now, like I said, it is going to be a simple function because I use the async, await syntax and then

within the function body, I'm just going to be looking for a response.

So I'll go with the response is equal to a wait and then I'll use the built in Futch.

But of course you can use Axios or some kind of external library as well.

By the way, I think during the project will use the external libraries because it's just going to be

a little bit easier.

And then we already know that within the fact we just need to pass in the string.

Meaning DRL, which, of course, he is right now, the API, GitHub dot com and then for its users

now we already know that as far as Futch we would need to run the JSON because we're looking for that

format.

And again, we can await for that.

And in this case, I'll go for users and is equal to a wait and response.

So that is of course my variable and then I run the JSON.

So my key thing here is getting the users.

And before you're on set users, let's just do a little bit of that's where I'm going to show you what

would be an issue if you just directly call said users.

So first, let's start by considering whether we are getting the data in a console.

And then once we get the data, then, of course, we'll discuss what steps do we need to take.

So in the console at the moment, I don't see anything.

Of course, the reason why I don't see anything, because in the user I didn't call it.

So let me get users.

Let's invoke it.

And now our console.

Yeah, I have three users.

Life is beautiful.

Like I said, it is an array.

And then each and every user in that array is an object.

Now what are the steps that I would want to take?

Well, I would want to use set users.

And of course, instead of this empty array, I would want to set it up as the users that I'm getting

from the getup.

Correct.

So instead of the same thing.

Right.

It's going to be all right of thirty users.

And then once I set it up, then in the six I will iterate over my users and then for each and every

user I'll just set up some type of return, meaning there's going to be a name, there's going to be

an image and all that good stuff.

Now before we do anything, I would want you to think about something.

So I'll purposely placed this in the comments because I don't want you to run this right now.

But what do you think is going to happen if we go with such users and then we pass in the users?

And let me tell you right away that as far as the code, this is correct.

There's nothing wrong here.

So I have my GitHub users and then I'm just using my set function and then passing in the GitHub users.

But there's a different problem.

What do you think is going to be a problem?

Well.

I have my use of fact, correct?

It runs after every render.

Now, again, I've said this already three thousand times, but it's very important.

What is the U.S. state doing?

It preserves the value.

And it triggers Rylander, so what do you think is going to happen right now?

Everything was fine with console log.

We did not trigger Virender.

That was fine.

But with this one, what are we doing over here?

So we're getting the users.

Then I call set users.

I update this.

I update users.

Now, what is that doing in return?

That triggers a reminder.

Now, what are we doing in the rear end?

We're getting users and then again, we're setting users.

So essentially we're setting up a infinite loop.

So if you're on this, essentially your browser will crash.

Now, it's not the end of the world, but that's why I commented out, because I don't want my browser

to crash.

I want to start out, be my guest again.

It's not the end of the world, but essentially you will have the infinite loop because in your function

that you call in the user, you are triggering render because you call shut users and wants you triggering

render again, you call user and on and on and on and on.

So what is the solution.

Simple out here.

Dependancy recorrect, something we already talked about and in this case I only want to run once the

component Randers so I'll add empty dependency w correct.

So now everything should be fine where I think I can just comment on the log or your reference and then

I can call site users and if I don't have the infinite loop then life is great.

So now of course what I would want is iterate over those users.

So again we'll set up curly braces, will say users then a map.

So we're mapping over for each and every user.

Of course I'll have my parameter.

So call this user.

And as far as the return, I don't know.

I'm going to go with a list item.

And you know what?

I think I'll place this in the short list.

So let me fix this a little bit where I'll be on our list.

Let's add a class name, by the way.

This class is coming from the index address.

This just adds a little bit of styling.

And then let's wrap our users in that on our list.

And then for each and every user, of course, like I said, I'm returning a list item now.

User is an object and I'll write a way, set up my structuring where I'm looking for idealogue login

and then Avatar and then Yahel.

Now, if you want to console log, you want to see what is the user, be my guest.

But in order to speed up everything, I'm going to do that in here.

I'm going to search the email URL.

These are just the properties that are on the object and that is coming from my user.

And as far as the list item, remember, each and every time we have a list, we needed to pass this

unique key.

And of course, this is what I'm doing over here.

And then for the user to want to have the image as far as the source, it is equal to the Avatar and

then underscore you are all online.

As far as the alternative, you know what?

Let's pass in the login just so we have some reasonable value and then let's go with a dev.

So right next to our image, we're going to have a dev with a hearing for and then let's play here to

login.

That is going to be my name.

As I say, it should look something like this.

And then right below it, let's add a link that just links back to a user profile.

So here we will go with a demo you URL.

I'm just type profile like so and we're in good shape.

We're essentially within a matter of minutes we set up a data approaching where we're looking for GitHub

users.

Again, the biggest takeaway would be the fact that if you have some kind of functionality within the

function, whether that is directly in a callback function or within one of the functions that you're

calling within the callback function of the user, if you are triggering re render, make sure that

the dependency.

All right.

So that we're either you only run it once they come on Randers or if certain values change.

But be very, very careful of how you set this up, because essentially, if you will fail to do that,

then you'll get the infinite loop again.

I keep on repeating it's not the end of the world, but it might just get annoying to keep on restarting

your browser just because you're not checking when you are triggering the ORENDER and of course when

the user effect Arun's.