00:00 On the web, we have these forms that allow us to perform mutations. And mutations are great because that's what makes your applications really usable. If you couldn't actually change the data that you're looking at, then it would just be pretty static. But we want things that are better than static. And so we want to have a way to mutate data.

00:19 The problem with forms, though, is there's a lot of indirection when it comes to forms. If you're using the raw web platform APIs, you've got form and action. That action is going to be a URL that is going to call some URL. And there's just a lot of indirection between, OK, this URL string and whatever routing library

00:38 you're using to wire all that up. And then on top of that, you've got your inputs. And those need to be serialized. And those need to be associated. There's a lot of indirection when it comes to forms and actions. And so React is trying to make this a lot easier by doing the same thing to server or to actions

00:57 that it did to components, meaning, like, let's compose this thing all the way down and allow our users of React to be able to reference the action that's going to be called directly. So what does that even mean? Let's take this as an example.

01:12 We have this UI hug koala, which has got this use server directive on top of it. This might be familiar. Kind of looks like what we did with use client. However, this is a different thing altogether, because it's not about components.

01:31 It's about references to these action functions. So the hug koala is going to accept the previous state. You're pretty much never going to use the previous state. But that's the API that the React team has put together for us. So we've got the previous state. Basically, think of this as a reducer.

01:49 So whatever you turn from this is going to show up as your previous state if the form is submitted more than once. And then you have your form data. That's what you're going to be using. That's what the user is submitting. And so with this, you can use that, do whatever mutation or interaction you need to do, and then return the results of your interaction.

02:08 Pretty simple, straightforward kind of idea here, right? And then you can import it directly. You pass it as an action directly. Or you can use the use action state. Or you can pass it to the form action prop on a number of elements. So you use it like a regular action in other parts of React.

02:27 Here, we're using it with use action state. And that's why we have this reducer style API. Use action state kind of forces that API. And with that, we get our form state, form action, and is pending. So we can have things dynamic based

02:44 on whether the form action is currently underway. We can even use this a little bit for some optimistic UI potentially. You definitely have access to use optimistic inside of your action as well, which is kind of fun and interesting. But the really cool thing, what makes all of this or ties it all nicely together is

03:02 this is a client component that is calling a function on the server. So none of this code ends up on the client. All of this is serialized in the RFC payload as a reference. And so that's something that we're going to be doing in this exercise is figuring out how is this serialized as a reference on the server?

03:21 And we'll be looking at the RFC payload. We'll be looking at our node loader transform again to see what does this turn into? Is there a register server reference like there is a register client reference for use client? So we're going to be making sure that our node loader supports

03:38 that, taking a look at how these connections are made, what it looks like in the RFC payload, so that you can seemingly call this form action directly from the client and have it end up calling this function that's on the server. It's going to be pretty cool. We'll also look at like, I mean, of course, there's a network boundary here.

03:56 So we'll be looking at what the network is doing to understand how all of that works. And then also, because we are in charge of how this network call is made, we're going to be implementing the call action function, which is what you pass to create from fetch.

04:14 So you say, hey, create from fetch, here's the RFC payload. Could you turn those into React elements? And one of the configuration options you give is call action, so that the create from fetches, it's deserializing. It's like, oh, here's a server action. Interesting. And it says, oh, you told me what to do when we call an action.

04:33 So I'll call that when an action is called. That's what's going on there. And you get the ID of the action and the arguments, so the form data. You encode that into the body. We pass the ID of the action into our headers. And then our server side, we'll update that a little bit so that we can find the action that is trying to be called

04:52 and call it with the right form data. It's going to be cool. It's going to be fun. I think you're going to have a good time. So let's get into this.