Original subtitles

We've got basics out of the way, of course.

Let's take a look at the more complex example where we're performing some type of data matching and

then we have the loadings that we have the error state, and then we have the final say that if everything

weren't successful, because otherwise you're probably thinking, well, there's probably no scenario

where we'll be statically changing this data from true false meaning.

Of course, I would want to do it somehow dynamically.

And one very good use case is by setting up some type of data, which we already covered in years of

fact.

But of course, in this case, it is just going to be a little bit different where I would want to still

keep my loading.

So that stays.

We still have our set loading.

That also can stay on line as far as you state.

You can go with Trull initially or you can go with files.

That is up to you.

In my case, I'm going to go with them.

So initially the loading will be true and then I would want to more state values and those are going

to be error.

So in here also is error.

And by the way, again, this is one of those common scenarios where a convention is to use this is

if you have some kind of boolean online or whatever, and again, there's no rule for it is just something

that you will see, I would say somewhat a lot more people just how this is and then whatever is the

name.

And then, of course, we still have our set function.

But again, it is just the naming convention.

If you don't want, you don't need to follow it.

And again, we're setting up a state value and by default, error will be false.

And let me add that is in front of the loading as well.

So is loading.

And then set is morning, and the last one will be yuzu, and essentially, as you can already see by

the URL, we'll just be checking for one get Abuzer.

And if the user exists, beautiful, we'll display some data, just some very basic data.

And if we are loading, then, of course, we'll display one content.

Then if there is now, there's going to be another content.

And eventually, if there is a user, then of course everything is great and the user will be displayed.

And in here we'll have a set user and then use state and we'll go with default user.

Awesome.

Now, like I just said, will be performing efforts request and we already know that we would need a

user.

That's why it is important.

But before we do anything, let's just decide well what we're going to display based on those values.

And we start by loading and we'll see if.

Is loading Astro Van just the showcase that we can add way more than just heading to, I'll just place

a dare again.

Let's just signals that you can have as big of a return you would want over here.

So it just right loading and then dot, dot, dot.

So that happens if the loading is true.

Now, in this case, we also have the Izarra.

Correct.

So here we go is error.

And again, I'll just skip a little bit by copying pasting and now say there was an error or error,

something that was nice and short and sweet.

So let's say that, of course, now we have loading.

Why now?

Because this is true.

Correct.

And then as far as they are, it is false to begin with.

And then eventually we have the default cache.

So if there is no loading, if there's no error, then of course I would want to display my user, which

simply will be a div somewhere online where we have the heading one.

I'll just display the user so you can probably already guess that if I set my loading to be false.

Now, none of the first conditions are met, so we just go with the defalcation where we display our

user, but the moment loading will be true and of course, it will be displayed.

So that is good.

That is going to be our return.

So now let's set up our request in the use effect where we will control our conditions.

So let's go with use fact.

Let's pass in the callback function now right away.

Set up a second argument.

I recovered.

Why we using it.

So please, if you need to go back, go back to the last video of usufruct where we covered that in

detail because I don't want to repeat myself all right away.

This empty array, meaning it will just run once and once we do it.

Let's run.

Futch, let's go with you URL.

As you can see, in this case, I'm not using as in Kuwait and I'm typing everything within a callback

question just to showcase that.

As always, you have multiple ways how you can achieve the same thing.

So you don't think that you always need to use a separate function that is incorrect.

Now, that is my preference because I find the syntax to be more straightforward, but you don't have

to.

And then we know that with which we have done then, because, of course, we are getting back the promise

and then we still need to go with our Jason.

So let's go the response.

And now I would want to return response, Jason, online also, I could set up a catch and if there

is error, let's just start by logging the error and there's going to be a little bit of code in here,

because as far as the fetch, it has a gotcha.

So now at the moment, we fetch everything, we return.

Drayson Beautiful.

Well, what are we doing after that?

Well, in between we'll set up another dart event and here we should have the user.

So let's set up our function again, user for the time being.

Let's just log whether we're getting the user.

So let's say right here.

And that if we inspect, we should see a user and of course we do, so that is our object.

So we successfully set up a request.

So now the question is how we can start operating with these values?

Well, first, we need to understand when are we calling this function?

So in my case, if I set loading right away to tomorrow when I would want to change it, well, I guess

when I get my data correct.

So once I successfully have my user, then of course I am good to go.

Now, if, of course, the user doesn't exist, then it's going to be a different ballgame shown here.

Let's add curly braces like so.

And now let's just set up a user first and then let's hide that loading.

Now, I already know that user will be here in the logging.

That's what I would want to actually display.

So since the user is an object, I'll just seconds and then I'll be looking for logging that is coming

from the user.

And then I have two functions.

I have set the user and then I have set loading.

So since my initial loading is true, since it is shown.

Now, of course once I have the user, then I would want to hide the first alstrup set user and I'll

pass in my login.

That's the only thing that I'm looking for.

And then the second thing is set is loading.

And now of course, I would want to set it equal to false y well, because I have my data correct.

Instead of default user.

Now I have my login, now I have the name of my user and then once I set the login then of course I

can right away call set is loading.

So once we'll save will notice that we'll have our initial state of loading.

And then once we have our data, everything is exactly like we expected.

OK, so that's the first thing that we can do with multiple returns where we have a loading site which

is either displayed right from the get go or another way you could do it like this where you say false.

So technically it's not displayed.

But when you set up your fetch or right before, I guess we can set up loading, that is true.

So that is another option that you can do.

So let's go here.

That is loading and we'll set it equal to true.

And now what you'll notice first again, we have this for split second loading and then, of course,

eventually we change the state.

We say set is loading is actually equal to false.

And then, of course, instead of is loading, which was true in the beginning, now we just go with

our default one.

OK, hopefully that is clear.

Now, again, I'm just going to go by default.

Cerita True.

And then here I said set e loading defaults, which is remember, you have this option as well.

Now, if you want to see that loading for longer, the only thing you need to do is just go to new window

Vinograd or start a localhost and learn.

I'm going to go with three thousand.

And in here we can just slow down the network a little bit just so you can see.

And we do that in network and I'm going to be looking for 3G, the first one on line once I refresh.

Now there's going to be a loading dot, dot, dot, dot, dot.

And then once we get the data, then of course we flip it.

Hopefully this is clear.

As you can see, it's not like every time we'll just do that manually changing these values.

Notice how this is happening dynamically.

Now, one problem with a fetch is that when you talk about this error, essentially you are not talking

about four or four.

For example, you're talking about the network.

So when I'm trying to say is if I'll add here as well, technically that kind of user doesn't exist,

but it is not going to trigger my error over here.

OK, and this is why we'll have to do a little bit of dancing around where when we are getting the JSON

right before that, essentially will check what is the status of our response.

Again, this has nothing to do with react and has to do with fetch where as far as built in functionality,

it doesn't trigger the error if the status is four or four, which means that there is no such user.

So how we would fix it, like I said we would set up over here is because there's going to be a bit

more functionality.

So within the calibrations, I will check what is the status of my response.

And if the status is between two hundred and then three hundred, then I would want to return JSON because

I know that everything is correct.

However, if the status is not between two and three hundred, then of course I will throw the error.

So then eventually I'll call this set is error again.

For example, with Axios you would have a different setup because AXA's deals with those kind of errors.

But as far as Futch, when you talk about Kuch, you're not catching here for or for the not fun.

You're just catching the network.

That's why we're doing this whole setup, and like I said, I'll go with the response and then status

and I'll see if it is bigger or equal to two hundred.

And let's do the and operator response and status status and less than two hundred ninety nine.

So two hundred ninety nine.

If that is the case then I would want to return my Jason.

So say he return and I'll look for response and then Jason.

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

I'll set up my house again.

I'll have to set is lowering to force because initially in my case it is true.

That next we would need to set is.

So now, of course, I would want to trigger that state set is here and now.

Of course we are setting it equal to zero.

So now we can already guess that where we have these multiple returns, this will meet this condition.

So is error now will be true.

Correct.

And once that is the case, we should see this error that up.

And then again, it's not a reacting, but I'll also throw the error.

So I'll say here, throw knew an error and I'll go with response and then statistics.

Usually that's where we can find more info.

Of course, this is not correct.

It needs to be error.

And once we save notice, now we have the error.

So we have error.

DataDot So first we were loading.

You can clearly see that once I refresh or split second we're loading.

And then since our YORO is incorrect, since there is no user, we are hearing the error, of course.

And then since we're hitting the error now, we're displaying Dev and not having one with error.

Dot, dot, dot.

And as a side note, of course you can place here spinner's or whatever you would want.

So once we start working on more interesting projects, you'll see how that works as well.

But essentially the main idea is following where we can have multiple states and then depending on that

state, we are setting up the returns.

Again, keep in mind, you can return different components.

You can return a bunch of HDMI elements or whatever you want.

This is just a most basic example.

OK, hopefully that is clear.

Let me go back to a proper user.

And now, as you can see, I first have the loading.

Then since there is no error, I'm just setting up the user and removing the loading because I said

that is loading equal to false.