00:00 Let's go into our UI index right here. And what we're going to do is keep track of the latest request that's going out and only process the request when we are the latest. To keep track of that, we're going to make a latest nav, ref, nave, use ref.

00:17 I make that mistake all the time and it makes me chuckle. Latest nave. All right, so then we have our latest nav.current. We'll assign this to a new symbol. Using a symbol is not totally necessary, but it comes with the benefit of being 100% unique and we can also give it a label.

00:36 So we'll say symbol, and this is going to be our nav for the next location. And so if we were to console log this, we would see, oh, which navigation was this for? And so then right here, all we need to do is say if the latest nav,

00:54 oh, actually here, we need to give this a variable name, so let's say this nav is equal to that and then we assign this to this nav. There we go. So then I say if the latest nav.current is no longer this nav, so we've navigated again since this request was made,

01:13 then we can just exit early. And then otherwise we'll continue to do the regular stuff we were doing. So if I come back here and I say star, then you'll notice we do not process the response that comes back. You can also take a look at the network and just make sure that things are happening the way that you would expect them to.

01:33 So very importantly to check out the waterfall here. So I say star. Each one of these is going to be coming in a different order. They are streamed and so the waterfall looks like that's not quite showing here. Let's try that once more. Why is the waterfall not showing? What the heck?

01:53 There we go. If you have this problem, there you go. I just taught you how to show the waterfall again. Okay, so let's try this once more. Clear all this out. And I type star. And you'll notice that one showed up way later. This totally happens in production. Almost never happens during development because you're running with the server

02:13 running on your machine. And so it's just not something that people think about a whole lot, but it absolutely happens in production. You want to think about this when you're building your apps. And this is the sort of thing that a framework should handle for you. But since we're building framework, I wanted to make sure we handled it. So there you go.

02:30 That is handling race conditions by simply creating a ref that will keep track of the latest navigation. And after the asynchronous stuff is done, if that isn't the latest navigation anymore, then just don't do anything about it.