00:00 You'll notice as soon as we land on this page, we're going to get this warning from React. It's saying, a component was suspended by an uncached promise. Creating promises inside a client component or hook is not yet supported except via a suspense compatible library or framework. Well, we're going to be building our own little suspense

00:16 compatible library for creating promises during render, but we're actually not creating promises during render, and this is a bit of a misnomer because I don't think anybody else is. Well, we're creating one promise during render but then caching it. So I guess, yeah, that warning works. That's okay, React.

00:35 So we are getting this error, and it's because now we are accepting the ship name into this component and it's suspending, and it has to call GetShip with that ship name so that it can go retrieve that ship. So every time this component re-renders, it's going to go trigger another request for that ship.

00:53 So if we take a look at this and look at GetShip, boom, we call that three times. Good grief. No thanks. If we change between all of these, look at all those times we're calling GetShip. We should have only called it twice by now, but we've called it six times. Goodness gracious. So yeah, this is a problem, not optimal,

01:12 and in addition, it's not just when we change the ship. Look at this. If I re-render anything else, we're going to call it three more times. What a joke. Yeah, you're better than this, and so am I. So we're going to do better by caching. So you're going to create a cache for our ship. You'll create a special implementation.

01:31 So that is the actual implementation, and then you'll have the exposed function will be leveraging the cache. So it'll look pretty similar to this. That is your job in the utils file. Good luck.