use() Hook & Suspense Types

[00:00:00]
>> Steve Kinney: There is one more TypeScript problem I want to solve for in here, which is, um, I hate this. I don't like this, because now this is like, again, it could be a post. We've settled what the post is, except I've added far too many extra things on here, so let's go back to something that might actually work at some point. Uh, great. I now know the results of fetch article are in fact a post. The problem that I don't know is I don't have that post immediately.

[00:00:33]
Like this has to be post or null, because for a few seconds, I don't have the post yet. Right? And again, I have played with stuff like, I'll make an empty post that has all the properties like ID is 0, and title is an empty string. Uh, I have come to regret that too. Uh, and so a lot of times the pattern that you really see is people getting all carried away, where they'll have this, and they'll also have const, uh, loading, set loading, like, nod if you've ever done a pattern like this.

[00:01:10]
We'll have you state, and that's going to be false, and then when we start this, we'll then like move this in and we'll set loading to true, and we'll do const error and set error equals useState. Now we have 3 different values that we have to kind of keep in sync, um. Uh, I'm not going to keep this code or whatever, uh, error or no, you know, maybe it was an error message, I don't know, it doesn't really matter.

[00:01:41]
And we'll try to keep all of these things in sync and we'll use that, and then we'll show a loading indicator if loading is true, and when it returns back, we'll set loading to false, and if there's an error and we got something back, then we'll set error to false, but if it catches, then we'll set error to. You know what I mean? Nobody wants to do that. Um, and there's all sorts of fun ways you can deal with that.

[00:02:06]
The nice part is, is if we go up a level to the actual newspaper, you'll see that I did wrap these news articles in a suspense suspended state, right, which means that now we can just kind of use promises directly and if the promise is unresolved for any of these in this case, um, we'll show this loading indicator, which means we can kind of like not have to deal with this juggling and all of this stuff here, we can get rid of all of this.

[00:02:40]
And we can say, we can even get rid of this. And we can get rid of that we kind of need. No, we don't even need that. And get rid of that. We can get rid of that. And what we can use is the new use hook in React 19, which basically is used for resolving promises inside of a suspense suspender. So here I can say post, and all this needs to do is say, um, use fetch article ID and other than pull in use.

[00:03:24]
And. Oh, I got called article, which is what I called it everywhere else, um, because the data structure from this JSON placeholder is post, but I decided to call the component newspaper and I got carried away. Uh, what's cool about this is now that we have confirmed that fetch article will be a post, we know that fetch article returns promise of this ID, title, and body. Um, with React Suspense, this component will be that loading indicator and suspended until the promises resolve.

[00:04:04]
So like this component will never render until this promise has resolved. Right? React Fiber will pause it, it will hold on, so by the time we ever get here, we know that it is now defined. Zod went ahead and parsed the schema. So now I no longer ever have to think about it being null. I no longer have to worry that what I got back from the API is not what I thought it was. And now my type safe sanctum is good again, right?

[00:04:36]
This will forever and always be what I think it is, whether I got the data from the outside world, whether the promise has resolved or not, because otherwise, suspense will have, like we'll just be this loading indicator until all of these are ready to go. Now you can argue, should I wrap individual ones, yeah, probably. Um, this isn't a course on React performance and suspense, this is a course on TypeScript.

[00:05:00]
So we did the expedient thing. But the nice part is, I have all of that type safety now in my app. I don't have to worry about the peculiarities of async. I don't have to worry about um stuff from the outside world or local storage or user input not being what I think it was because I parse it, and life is good. Uh, there's a lot of other things you can do with Zod. Uh, we have a full stop TypeScript course we talk about on the server-side, as well as a little bit deeper dive there as well.

[00:05:33]
So, um, definitely check that out too, but honestly, the schema, I'm sorry, the docs are pretty solid as well, and we got a lie, it's not a giant library, um, but there's a lot of really cool things you can do with it. All right, so that is the most insidious place that um data we don't have yet might be, and because of a bunch of new React features, we just solved for it pretty beautifully.