Managing FormData with useActionState

[00:00:00]
>> David Khourshid: Okay, so the next one that I want to talk about is actually, it's a shorter lesson, but it is one of the ways that you could actually simplify basic forms. Because let's be honest, a lot of our application is just a bunch of forms and most of these forms are actually simpler than we realize.

[00:00:22]
So I'm going to go to the scratch pad here and just demonstrate to you basically what we could do about forms. So let's say that we have a form and we have, you know, first name, set first name. And just for, just for this example, we're going to only use one first name and then we have a form which handles that first name.

[00:00:50]
This is code that you learned when you are first starting off in React. It is probably the most basic and common example of use dates and working with forms, and so the idea is that we would have an on submit over here. And again, this is muscle memory, but you would type event.Prevent defaults, because the form is going to have some sort of default action of reloading the page.

[00:01:17]
And you don't want that, which is why we have it over there. And then let's say that our form just consists of the first name and we want to do something with that. We could just console log the first name. But here's the thing, in HTML and the dom, the form actually contains the state itself.

[00:01:39]
So really we're duplicating state over here. When you type into an input, and especially if you give it a name, like let's say that we give it a name of first name, that data already exists in the form itself. So let me show you what I mean. If we get rid of this on change and instead we read the form data from the form, then we could really just in a way we could derive that information.

[00:02:08]
So we're going to grab the form data using this new form data constructor and using this target, which is the form element. For some reason, even though we're in OnSubmit, TypeScript thinks that it can be any random element. So we have to say no, this is definitely a form elements that we're working with.

[00:02:31]
And so what you're going to get is a form data object. And so the FormData object, it has its own API, but it is completely native and supported in all modern browsers. So what we could do is if we want to get the first name, there's formdata get, and then we could get that name, you know, just directly from the form data.

[00:02:53]
And so what this allows us to do is really eliminate a number of use dates so we don't have to keep track of each individual field. Instead we could just read from that. Now if you have many fields, then we could actually use. We could use Zod as well.

[00:03:13]
So how many of you are familiar with Zod? Okay, or whatever related library you're using. So with Zod we could actually parse, we could create a schema for the form and so we could parse that information from the form. So let's say const form schema equals an object where we have the first name and then we could just add some validation there.

[00:03:46]
But Zod also allows us to parse and see that the entries of this form data, which the form data you could use object from entries because it's going to be key value, key value, key value. And then you could create an object from that. So you could parse that using the form schema.

[00:04:07]
And if there are errors and this allows you to do form validation as well. So you might have a first name is required thing or something like that. But we could get parsed data firstname if it exists. And we know that that's going to be a string. So that's how you could use Zod as well in combination with form data.

[00:04:36]
So why am I showing you this? This is definitely an alternative to using just multiple use dates for your form. But also when you're working with a next JS application, there actually is a hook that really helps you with work natively with forms. There's both a hook and there's a native Next JS server components or Server Action feature that allows you to pass a server action directly into a form and to use that.

[00:05:09]
And this will handle all of your forms loading states and the response from submitting the form and everything like that. So the way we could do that, if I get rid of all of this, we're going to grab the use action state hook. So it's gonna be states some submit action.

[00:05:34]
So just gonna say, action equals, and this is something that just takes form data. So we're going to use action state, pass that submit action in there and and then also pass in an initial state. And this is just something that it requires. So this initial state we could just have as null and it's also going to give us is pending.

[00:06:02]
And so the cool thing about this is that we could pass in that form action directly to the form and then we don't need to maintain the, we don't need to maintain each of the individual variables because it's going to be done via name and then when you press submit, it's just going to go through that form action we're going to get is pending, so we could definitely have a pending state.

[00:06:26]
So if is pending, then we could show something like a loader or something like that and then eventually we will have our state. So if we have our state then oops, not that, but we could return the state that we get from the submit action.