All language subtitles for 018 Loading Errors & State Batching_en

So let's make sure we show a loading spinner if we are well, waiting for the HTTP request to complete.

To do that, we, of course, need to manage an extra piece of state maybe is loading and set is loading

our appropriate names with U.S. state and initially that's false.

I need to manage state here because we'll change does and every change should lead to this ingredients

component to Remender so that we can update our loading state and show something in the UI.

Now, when we're adding an ingredient, let's say then I want to set is loading to True Judah's right

before we call fetch.

Once we got a response, however, I want to set it to false because now we're done.

So I'm updating my state here with these calls to set this loading.

This, of course, will also mean that we rendered the component.

And now we can use our loading indicator to, well, output, whether we're loading or not, we could

display this indicator in all kinds of places.

I like to display it in my ingredient form, but it's up to you.

I will add loading prop here and point at is loading here.

So 40 is loading state to the ingredient form and in the ingredient form there, we can import the loading

indicator from UI loading indicator.

So that's a component I prepared for you.

It's a little spinner.

And then down there next to the button, we can check props loading.

And if that's true, then I want to render the loading Enriqueta.

Otherwise, I want to return nothing, by the way, a shortcut for this is that you replaced questionmark

with and so with two ampersand signs and then you omitted us Colen else case.

Now, this means this will only get rendered.

If this is true.

It's a little JavaScript syntax, but it does a check.

And if this is true, this gets rendered or diskettes return.

And in this case, Synthron react does gets rendered.

So now loading is true.

We should see an indicator where a setting loading when we add ingredients, let's all do it when we

remove ingredients there I call set is loading.

Said it to true initially.

And only once it is deleted.

So here in the then block, I'll set it to false because we're not loading anymore.

So if we save this now, if we add.

Chocolate one.

We should see a loading spinner here, and we do if for now the lead something, we also see one.

So that's a bit better.

And of course, we could do something similar when we're loading all the ingredients initially.

We'll take care about this later.

For now, this is what I wanted to show you, though.

Let's next handle errors, things all that could go wrong, let's say, for removing.

We get an error.

And Firebase, unfortunately, kind of is really stable.

So we probably won't get an error there.

But if I remove this here and Jason will force a technical error there for now, if I click on chocolate,

actually just keeps on spinning, this doesn't get removed.

And here we see we have an erroneous request.

We got an error, but we're not handling it.

And that's not a great user experience because it's not obvious to the user who hasn't.

The developer tools open what went wrong.

So we want to handle errors like this now with fetch, since it returns a promise we can handle errors

by adding catch here and catch.

We'll get the error and then allow us to do whatever we want with that error.

Now, here, I want to output my error model and show a nice error message if something goes wrong.

Therefore, I'll import the error model from.

DUI folder and there error modal jazz and rendered as if we have an error, hence we need to manage

an extra piece of state error and set error with use state.

And initially, it has no value in there because we have no error.

Initially, it's just undefined or now initially.

But now we can call set error whenever we got an error.

So let's say because here I noted it, have one in the remove ingredient handler into the catch block.

Here we call set error and I set error message as a value.

Every error object by default has a message property.

So I'm sending this message as a field or as a value for for error.

And you can of course, manage whatever you want in here, can also set your own message like something

went wrong or anything like that.

And I'll do that here, because that pre-defined message might be really cryptic to users, so I showed

this one.

Now we can output the error model if error is set.

So if that error state is set.

For this year in this Divx.

I want to check if Arora is true, remember, Arora is my error state.

So if error is true and if it is using the same shortcut as before or rendered the error modals, it

is only gets rendered if error is set and then to the error model, I pass my error message and that's

just what a story in error.

No air remotely, actually, is a component which tries to call on close if we click the backdrop audio

OK button, so I'll add on close here and there.

I want to execute a function that clears the error so that a new function, clear error or whatever

you want to name it.

And in the end, what this does is it calls set error and sets us back to null.

And if that is now, this error model will all disappear because this condition will not be satisfied

anymore.

NULL is treated as false and therefore this won't get rendered.

So here on clothes, I will point at clear error.

So at this function, which should get executed if on Close's triggered, in addition to setting the

error here, I also want to set is loading to false here because even with that error, we are not loading

anymore.

So the loading spinner here should disappear.

Otherwise that will keep on going.

Now if we save this and I click on that, I get that error model for click.

OK, we're done.

That's also another important thing you have to understand regarding how react, works, react also

Bachus state updates.

I'm naming a sad state here because whenever you call a set, whatever it is function from use state,

this will, of course, trigger a state update.

And their react has a mechanism for batching multiple updates together to avoid unnecessary renderers

cycles.

So when you set your new state.

No matter which approach you use, react batches, these state updates.

So that also means that riding the next line after calling said you said you can't immediately use the

new state because we won't go ahead and update the state and skip all the other code instead will execute

all the other code in the same function.

And Bache, all state updates you scheduled there together.

So all state updates from one at the same synchronous event handler.

That's important.

Synchronoss are batched together.

That's a bit theoretic.

What does this mean?

It means that here in clear error, for example, I have set error and said is loading.

This isn't the same function.

These two steps are executed synchronously after each other.

So even if that were in the then block, if both are in the same, then block, then these two always

run right after each other and then react Bachus D to state updates together.

So this will not mean that set error causes a remender cycle and set is loading causes another one,

but will only have one render cycle here, which updates both states or which reflects both state updates

to be precise.

And looking at that settles loading is actually wrong here and clear error or not wrong.

But you might also argue that you want to move it here where you set the error initially then.

Then this spinning icon also disappears right when Mole opens, of course, because we're setting loading

at the same point of time, we're setting the error.

But these two, again, will be batched together.

So it's not to render cycles that are executed to show the error model and to remove the spinner.

But it's one of the same render cycles, which already has both state updates taken into account.

So that's how REAC Bachus state updates and how you can handle error with a separate state, of course,

where you store errors and then react to them appropriately.