This New React Hook Changes How You Use Forms

Key Takeaways

one of the most annoying things in react is dealing with form update loading states which is why I love the new use form status hook because it makes creating loading States like this so incredibly easy welcome back to web dev simplified my name is Kyle and my job is to simplify the web for you and in this video I'm going to show you how to fix this really common bug let's say that we're typing in some type of to do it's going to be just a new to do I click create it's kind of taking a while so I click it again and then oh it happened twice it loaded it two times essentially the API was taking so long that when I click create I got impatient and clicked it again and it caused it to actually send off multiple requests this is a common problem instead of applications that a lot of people don't plan for because they don't have slow enough connections or they're always working locally so they never have to worry about that slow connection speed so we'll take a look at the code here I can show you how to fix this the normal way and then I can show you how to fix this with the new use form status hook because that hooks makes it incredibly easy to fix and it makes it essentially automatic which is really nice so if we look at this code we're getting some initial to Do's just pretend that this is coming from some type of API we're setting that inside of our state and then what we're doing is whenever we make a submission we're creating a brand new to do inside of some type of API and we're returning that new to-do and setting that back into our state this create to-do function if we scroll down to it it's just a fake function normally like you'd call an API but essentially all it's doing is waiting one second and then returning a brand new to do with whatever our title is that we passed in then we're just rendering out that form and down here we're rendering out all of our to-do's this is really straightforward super simple code for the most part essentially the problem that we're having is while our to-do is being created right here while we're waiting for this we don't have any way to notify the user that something is happening so they just Spam that create button a bunch of times and as you can see a bunch of new to Do's get added to the list when you don't want them to so the normal way that you would handle this is by just throwing in some type of loading state so we can create a brand new state for like is loading set is loading and we can say by default this date is going to be false then what we can do before we make any request is we can set our is loading to true and then below that we can just set it back to false because now we are no longer loading and then we can use this data to essentially notify the user by for example disabling this button so we can disable it if we're in the loading State we can also render out different text so if we're loading we can like render out the text loading or something like that or we can render out the text to create so now if I try to type in it to do and I click create you can see it says loading the button is disabled so it doesn't matter how many times I click it only creates one single to do now this is great but it requires you to create this extra loading variable and if you have lots of different forms for example you may have lots of different loading States and honestly it's kind of difficult with naming to get them all named properly it's just not ideal it'd be nice that this was just kind of an automatic feature for you you could just hook into and that's where this use form status hook comes from now one thing I will copy out this video with is this is an experimental hook it's not in the stable version of react so to use this you need to make sure you're using an experimental version of react and react on as well as if you have the eslint plugin for the hooks you want to use the experimental version for that as well also if you're in typescript it's really important that you add these lines somewhere in your application it doesn't matter where I'm using V so I just threw them into this as well just to make sure you're using the experimental types as well now if you're using next JS and you're using server actions this is kind of where this whole idea for this hook came from so you can use this inside of next.js with the experimental server actions but I'm going to show you how you can use it in just plain react because it works in react as well so we want to import that hook and you may think we just import it up here by saying like use form status but this hook actually doesn't come from react it comes from react Dom which I know sounds a little bit crazy so we want to do this import from react Dom instead and we want to get that use form status hook and this is an experimental hook which is why it's prefixed with experimental I'm just going to rename it to use form status that way we can use it as if it was an actual hook that we can use in production so now we have this use form status hook now essentially the way that this works is it hooks into the action for your form but we need it to be inside of a custom component inside of our form so we need to have a custom component somewhere on our form and then we need to use this hook inside of it think about how you would use context in react your form is like the context and this use form status Hook is just consuming that context so it must be inside of your form and inside a custom component in there so we'll create a custom component for our submit button because that's the thing we care about modifying and what I'm going to do is I'm just going to copy this button return it down here just like that I'm going to get rid of all of this stuff up here and just return our submit button there we go and I'm going to get rid of all this loading State because we're actually going to handle this entirely with that use form status hook so now I'm going to use this hook inside of here so use form status this returns to us some data and if we look at this data you'll see that if we just say data dot that there are four different things we have the action we have the data we have the method and we have pending I'll talk about all these in just a second but the important one is pending this is essentially the same as that is loading variable so we'll just say that loading is equal to that pending status now if we just save and this is all we did you'll notice it still doesn't work we aren't actually loading our button this pending never sets to true and the reason for that is to actually use your form status you can't use the on submit function and instead you need to use the action function instead instead of a form in action normally takes a string to like the URL that you want to post to so we would say like new to do but inside of react you can also pass a function to this and this function will just call the function up here that we're using which is on submit just like that and this function is going to automatically cancel your event for you and instead of passing in an event object it's going to pass Us in some data and that data is going to be a form data just like that so this data it takes the form of this form data which is something that's built into HTML so now we don't even need a ref on our input because we already have that input value inside this form data and what we can do is we can just get our data from it so we can say here that our title is data.get and we want to get the title property and we just need to give our input a name of title to link them together so now these two things are linked and here we can just check to see if our title type is a string if it's not a string we're going to return otherwise we're going to pass it into here to create a brand new to do so we just had to minorly change how this function works but now that we're using an action instead of an on submit you'll notice when I try to create something I'm now getting that loading State automatically which is really nice and all the other data I'm getting as well so I can do a console.log just to show you what that data looks like I'm just going to type in a new to do click create and then we're going to take a look at that data if we go into the console you can see we have an object this is what this looks like if you don't have an action being currently performed you can see pending is false and everything is null if we do have an action being performed though you'll notice we have yet a bunch of information first of all our method this is a git request because we didn't specify a method on our form but if we change this to like a method of post you'll know that it'll say post instead also inside of here you'll see that we get our data that's the same exact form data passed to the on submit function up here so we can do whatever we want with that pending is set to true because it's currently loading and then we have an action which is just the function that we called so if we want we can call this exact same on submit function again now the way that this loading status works is as long as we're waiting for something so as long as this is a promise that is waiting to resolve that pending is going to be set to true so we need to make sure we're waiting for some type of Promise inside of here or you just return some type of Promise because it's depending on this being an asynchronous function that is going to do something and then once that thing is done it's then going to return to you that the pending is false so while this is doing something the pending value is going to be set to true so you'll notice that if I actually get rid of this await then you'll notice that it's no longer going to actually work because it's not waiting for anything so it doesn't know that you're in a pending status now I know the amount of code that you write for doing this versus the other way are pretty similar to be honest I mean there's not that much difference between the two ways but especially if you're working with something like next.js or something that already implements this form data using this system is so much easier and I really like that they're starting to add these nice features into react because it makes it a lot easier to do certain things because a lot of times you'd have to write all this boilerplate code for handling these things and having these custom hooks just makes it a little bit easier to do that now if this gets you excited to learn all about the newest react and next.js features I highly recommend checking out my brand new react simplified course it just launched last week and it covers everything you need to know about react and next.js I'm going to have it linked down in the description for you but this course covers literally everything you need from an absolute beginner all the way to Super Advanced react nextgs features so I highly recommend you check it out