00:00 The first thing we need to do is right down here we've got a couple of places where we're updating the content key inside of a transition. And this is something we need to do outside of our component. So we're going to come up here to this little bit of code, and we're going to create a update

00:17 content key function. And that way you can call this anywhere you want. But then inside of our root, we're going to add a use effect, use effect that assigns it to the actual value we want it to be assigned to. So update content key is going to be sort of set content key.

00:36 It is going to take a previous or our next content key. And inside of a start transition, we want to set the content key to that next content key. And so now we can update these other places where we're updating the content key to simply

00:55 be update content key there and right here also. And so this will allow us to update the content key outside of our component, which we need to do inside of our call server function. OK, great.

01:12 So first thing we're going to want to do is get the content key from window history state key. And then when we have finished streaming this fetch promise, then we want to update the content key. So let's come down here to on stream finish.

01:29 We'll grab that utility and come back up here. And when that promise is finished doing all of its streaming nonsense, then we can update the content key. And again, the content key may not actually change in this case because we're still on

01:48 the same location in history. However, this will also trigger a transition, which is going to make us re-render. Now if we re-render, we want to have new content to display.

01:59 And so we're going to grab our our content cache to update the cache at this location in our in our history for this key. So we'll say content cache dot set content key, this action response promise.

02:18 And that is going to have our new content in it. And with that, we should be should be done. Everything is all wired up together properly. So if I refresh the page now and I remove the exclamation point, then we get that removed there as well.

02:36 As soon as the request is all finished. If I add a bunch because I'm really excited that this actually worked, then that revalidation happens there as well. And so if we run through all of this again, the first thing that we're going to look at is this call server. So we submit the form call server is called.

02:55 We trigger the request. We're going to get our content key. And when this request is finished streaming, then we're going to update our content key. But while that request is in flight, we're also going to parse the RSC content into React elements. And that's going to be our action response promise.

03:12 We're going to put that or update our content cache at the content key to be that whatever resolves from that. So that promise. And then also, we're going to grab the return value here so that we can return that back

03:28 to the UI that requires it so we can display the success message. So as part of this update content key, what we had to do is make this function that's sitting out here so that it can be reassigned later to handle the new content key and start

03:44 a transition to trigger a re-render of our our root component. And not just a re-render, but a transition so that any pending states or anything get handled properly. Typically, pending states won't actually apply because we've already cached this content.

04:00 So and we don't actually do this until the content is finished loading either. And that handles revalidation of our UI that's showing up to the user after an action is submitted.