I wanna show you a fairly recent addition to React, a new API, the use function, and in conjunction with something called Suspense, we can make the code that we've just written before much nicer. Okay? So instead of having this async function, getPuppies inside a useEffect here, I wanna have it outside and I could have it up here, but I'll put it in a new file. So I'll put it in a new directory called queries. Uh, we can just have one file index.ts, we are going

So I'll put it in a new directory called queries. Uh, we can just have one file index.ts, we are going to export this async function, getPuppies and I will remove the places where we are changing component states since we don't have access to it here. And so instead of logging, we are going to return the data here and here I'm going to throw the error so that the consumer can actually handle it.

and here I'm going to throw the error so that the consumer can actually handle it. Okay? So I'll delete all of this and actually I'll completely delete the useEffect, okay? And I'm going to comment out the error and ease loading states and also comment out all of this. So in our component here, we want to use the use function. And this might be confusing, but what the use function once is a promise, not an awaited promise.

but what the use function once is a promise, not an awaited promise. So I'll go const puppyPromise equals, and instead of awaiting the getPuppies function that we have from our queries, I will skip the await keyword so that we actually get a promise. And in here in the use function, I will pass the puppyPromise and I can actually also comment out the API puppies here because we are going to get that API puppies cons API

and I can actually also comment out the API puppies here because we are going to get that API puppies from our use function calling the puppy promise. And bear with me here, but here this is going to suspend these components until the data arrives in API puppies. And so if I take my pret tag here where I try to string the API puppies, now when I refresh the page, you can see we get our data and I dunno if you've noticed, but we had a blank screen for one second.

you can see we get our data and I dunno if you've noticed, but we had a blank screen for one second. Let me increase this sleep time to three seconds. And so when I refresh 1, 2, 3, the whole app is completely stalled. I said stalled, but the app is technically suspended. The use function that we've used is going to suspend our application and then we can use a Suspense component from React to wrap around the part of the app that we want to suspend.

and then we can use a Suspense component from React to wrap around the part of the app that we want to suspend. And then the rest of the application is going to be able to load immediately. And then our little suspense boundary is going to say, Hey, this part needs to suspend until this has resolved and then I can get the data. So check this out. Instead of suspending the whole app, I just wanna suspend the ApiPuppies component. And so higher up in my component tree here,

I just wanna suspend the API Puppies component. And so higher up in my component tree here, what I can do is use a Suspense component from React. And the really cool thing about the Suspense component is it takes a fallback property and here I can render any sort of UI that I want. And basically until the promise has resolved, this is going to render that and then automatically switch to what's inside the Suspense boundary. So now it should just show the spinner without the white

inside the suspense boundary. So now it should just show the spinner without the white box, which might look a bit awkward, but let's try this refresh loading spinner. And when the data arrives three seconds later, it swaps it over. So I guess the correct way to handle this here would have to have this wrapper not in the component but outside the suspense boundary. Like so let's try one more time.

but outside the suspense boundary. Like so let's try one more time. This time our loading spinner is inside the box and it looks much nicer. Keep in mind that what we're doing is replacing all of that here, I'll delete it and all of that with our implementation of the use function in conjunction with Suspense. So our API puppies literally gets the data from the API and uses this use function to suspend the puppy promise.

So our API puppies literally gets the data from the API and uses this use function to suspend the puppy promise. And then once it gets it, we can just return whatever we want without having to make checks for the loading states and all of that. And we hand off this responsibility to uh, suspense boundary, which will use the fallback prop to have a loading state while it loads, okay, we've taken care of the loading and success states, but what about the error state when the API doesn't return

we've taken care of the loading and success states, but what about the error state when the API doesn't return what we expect, just like Suspense component, give you a fallback prop for the loading state ErrorBoundary have a fallback for when you have an error. Now it's kind of convoluted to write your own error boundary and you have to use the class syntax that we haven't talked about that is not really used anymore in React.

that we haven't talked about that is not really used anymore in React. But even the React documentation recommend you to use the react-error-boundary package instead. And this is a package that is going to give you an API that feels identical to the suspense API. So you'll get an error boundary component with a fallback prop that lets you display what you should if there's an error. So let's do that npm install react-error-boundary

what you should if there's an error. So let's do that npm install react-error-boundary, here we go. And now what I'm going to try to do is wrap my Suspense component in an ErrorBoundary component from react-error-boundary like so. And it squiggles at me to tell me that I need a fallback property so I can go fall back <p> tag, oh no, something went wrong. And so let's bring back our rainy day scenario

P tag, oh no, something went wrong. And so let's bring back our rainy day scenario where there's an error and I will refresh the page. Oh no, something went wrong. So this is useful, but we were displaying some error message that was relevant to the actual error coming from the API and now we just have some static text. So if we wanted to have access to this error data that we received from the API, instead

So if we wanted to have access to this error data that we received from the API, instead of using the fallback prop, we can use the fallbackRender prop, which is a render prop. This is a pattern where instead of a component, you have a function that returns a component and in there you can receive a prop. Here we want our error and so now we can render that prop. Uh, let's stratify it like so. So once again we getting this error data

Uh, let's stratify it like so. So once again we getting this error data but this time inside the error boundary. But it's important to understand that what you just saw on screen does not come from the API puppies component where we stratify the data, but it does come from our error boundary fallback render. So if I have a <p> tag with a class name of text-red-501 more time, we can display the error, that message, and then error, that details I believe it was called.

red 501 more time, we can display the error, that message, and then column error, that details I believe it was called. And so now if you have an error, we are going to display the error boundary, but if we have success, we will now get the data and just to make the point a little bit clearer and cleaner, I know I've moved that outside here, but I want to remove it. Once again, remember React is all about refactoring and adapting to the complexity.

Once again, remember React is all about refactoring and adapting to the complexity. So I will bring that back around the data response when we have the data like this. But maybe here instead of bg-white, I will have bg-green-100 slight tint of success. And in the error boundary here, I will also wrap the code in that div. But this time we'll have bg-red-100 and for the loader one more time.

But this time we'll have BGRed100 and for the loader one more time I will have my wrapping div that needs to wrap the loader circle. So in case of error we have a slightly red box with the error message. While it's loading, we have a white box with the loading circle and if it succeeds we can render the API puppies, which will have a slightly green successful box loading.

and if it succeeds we can render the API puppies, which will have a slightly green successful box loading white success green. But if we were to have an error, we are going to have a red error. Alright, this lesson was arguably quite intense. Uh, if some of it went over your head, don't worry too much about this because like I said, in most cases you will be using a library

because like I said, in most cases you will be using a library to do some data fetching. But I think it was important to go through the motions because first of all you will see react code using useEffect and then a state for loading, a state for error and all the stuff that we've looked at. And also I think the Suspense Boundary and the ErrorBoundary that we've seen at the end of the lesson are quite valuable.

and the error boundaries that we've seen at the end of the lesson are quite valuable. This is something you will very likely be using in your React applications. Alright, in the next video we are going to do some refactoring to actually take the data from the API. And instead of just having a box that shows the pre tag with the JSON string effect data, we are going to try to flow these API puppies through our application.

with the JSON string effectData, we are going to try to flow these API puppies through our application and pass it to the puppiesList, to the shortList, the search and everything that needs it.