Exploring React 19 Features - use() Hook, Actions & More

[Music] hey what's going on guys so react 19 is just around the corner and it will include some major changes and improvements and there's already a bunch of YouTube videos talking about those changes and we're going to do that for a few minutes but I want to jump into the the react experimental build and explore some of the changes and features including the the new use hook the form actions as well as some of the new hooks like uh use form State use form status use optimistic a lot of these hooks that are going to become stable in version 19 now I am right now in the middle of creating my 2024 react crash course and that will most likely be released before react 19 is however the fundamentals of what you would learn in a crash course aren't really going to change as far as how to create a component how to pass props how to use the react router things like that so if you're looking to learn react the crash course will be out soon all right all right so the GitHub repo with the final code for this video will be in the description it's basically what we're going to build is just a bunch of tiny projects that use some of the newer features um that react 19 will use and some of this stuff has been in the canary builds for a while but they're set to be stable for version 19 all right before we do that though let's talk about some of the major changes in react 19 so the first and the most major change is that react will now use a compiler and you may notice that a lot of the big Frameworks seem to copy each other and react is no different so they're taking a page from spelt Playbook and some of the other Frameworks and they've created a new compiler that will compile your react code into regular JavaScript potentially doubling performance and what's even better than the performance gains at least in my opinion is that it's going to make react a little bit easier to work with cuz I don't know about you guys but I feel like a lot of the newer Frameworks like spelt View and even project like Astro they just do things in a a much easier and more intuitive way than react does even though react is the most popular frontend framework and I think it it's kind of fallen behind in that regard so it looks like this compiler is going to bring react react up to speed and make things easier when it comes to things like unnecessary renders which I'll talk about in the next slide and the compiler will model both the rules of JavaScript and the rules of react things like immutable props immutable State values so this will make react a bit more forgiving and will let you bend the rules a little bit however many developers want their code to abide by those rules so in that case you can enable react strict mode and you can also configure the react es lint plug-in and things like that now the compiler is actually being used now in production with Instagram so it's not like it's just some experimental thing that may or may not happen and a lot of the features that I'm going to be talking about are in direct relation and possible because of this compiler so let's talk about some of those changes that the compiler will bring in addition to just overall performance so first off it'll do automatic memorization which is the process of optimizing components to bring um to prevent unnecessary rerenders which has kind of been a pain point with react for a lot of years now and I'm talking about rendering components when no props have changed or anything like that and traditionally we would use hooks like use memo and use callback to kind of combat this which I always found to be annoying not just to use but also to teach they're kind of difficult to explain so I'm really excited to see memorization become automated and truthfully I think with most developers including myself I think that the compiler will do a better job than we would because sometimes it can be difficult to figure out where should I use use memo and and things like that so I'm just glad that these hooks aren't going to we're not we're not going to need these anymore now there is a new hook just called use it's not use something it's just used and this allows us to read and asynchronously load the value of a resource such as a promise or even context in fact use like this use and then passing in context is going to completely replace the the use context hook which I know can be annoying because you may have just learned about the Ed context hook and seems to happen a lot with react I'm not someone that just constantly praises the framework I think it has a lot of shortcomings and one of them is just that you just have to keep re you know learning new things and then that is you no longer need it anymore then you're going to learn something else so that can be kind of a pain in the ass and and I totally get that I do think at some point it'll just it'll really slow down and we'll just have a a way of doing things that they're satisfied with hopefully all right so if you've used nextjs you've probably used react server components and the Ed client and used server directives so they've been available in the canary version for a while now react 19 will have built-in support for them this means better SEO faster load times easier data fetching with server components and you use these these directives at the top of the component file and they basically let you write both client side and server side code in the same file now obviously you need to have a server to do to use the Ed server directive but it's a huge step forward uh for react and I'm sure that we'll see more meta Frameworks emerge that will make it easier to to use server components now another huge change is actions or the actions API which up to this point um with client side react we would have to have a submit Handler on a form and then make our request from a function or whatever it is we're doing and now we can actually use the action attribute on a for form to handle the submission and this is something that you might be familiar with if you've used nextjs or or remix but now it's a stable or it will be a stable feature of react and it can be used for both server and client only applications it can also operate synchronously or asynchronously and this is going to make working with forms much easier and more intuitive we also have new hooks like use form State and use form status um that work really well with actions and I'm going to give you some examples of how to use these in a little bit actions are also automatic automatically submitted within uh a transition which will keep the current page interactive while the action is processing and we have the ability to use a sync of weight in transitions so this will allow you to show a pending UI while uh with the is pending state of a transition now another hook that is no is to is set to no longer be experimental in react 19 is use optimistic and this hook can be used to apply a temporary optimistic update to the UI while we wait for things like the server to respond so using this hook with actions you can optimistically set the state uh of the data on the client such as showing a post so if you submit the if you submit a post if you're creating a new one and you want to display it it'll display right away before the server even responds or if you let's say you like an article or you like a post it'll show that before the server actually responds um so it just gives you a faster and more responsive experience now another thing that you won't really need to do anymore is use third-party packages for SEO and metadata because react 19 will have built-in support for metadata such as titles descriptions keywords and you can actually put it anywhere in your component like you could just put a title tag anywhere in the component and it'll just work and it works the same way in all environments including fully client side code and server render code all right so these are just some of the other small changes um ref is now going to be passed as a regular prop so traditionally we would use forward ref which lets your component expose a Dom node to a parent component with a ref and this is no longer needed because ref will just be available as a regular prop um asset loading so that's another Improvement you've probably had times where you load a page and you get a flicker of unstyled content that shouldn't really be an issue anymore because now asset loading integrates with suspense um and this means that you'll have a smoother experience and let's say for instance you have a really highres image asset loading will make sure that that image is ready before it's displayed and then react 19 will have better support for web components and I couldn't find much information on this on the blog post or anywhere else but better support for web components means you can build you know reusable components easier and even mix and match with other Frameworks and then the compiler like I said it's going to offer a lot of automate automation it will uh it will do things like lazy loading and code splitting and we're not going to have to use react. La anymore for lazy loading components and then the context. provider element will just be replaced with context so those are pretty much all the the major changes that I could find now what I want to do is jump into the experimental build of react I've just set up a just a v server and I installed the experimental build and we're going to look at things like the the use hook we're going to look at form actions and some of the newer hooks that go along with that all right so let's get into it all right guys so I have this react 19 playground and basically I created just these really small projects for each one of these to kind of demonstrate how the use hook Works in different ways and how actions work how some of these newer hooks that work with actions work and I have the starter version here which I have open in vs code and then I also have the finished version here in case I need to show you the final project um now I'm not going to do all these from scratch I basically have all the code here already except what I want to show you so I'll go through and we'll add the the new stuff so that you can learn how those work all right and I'm probably not going to type everything out I'll paste some stuff in because I don't want this to take too long um I know that these days people don't it seems that a lot of people don't like longer videos and to to follow along and type everything out so I'll try to make it quicker but um just kind of bear with me and and you have the code in the description if you need to see that at any time so this first one it says use the use hook to fetch a random joke from the Chuck Norris API so basically we're going to use the use hook in place of use effect so if I view this you'll see that it actually does work even on the starter version and the reason for that is because if we look in our components and then use example one um fetching the jokes using use effect just the the plain old use effect way that we've been doing it for years so making the request I'm filling the state so set joke set loading we're checking for loading and if we have the joke we're passing it in as a prop to this joke item component so many of these will have multiple components but they'll all be in the same file just to make it easier and keep everything in one place now I also want to mention that I'm using the experimental version uh of react and react Dom so the way that I set this up is I just set up a v server I set up Tailwind um and then I just did npm install react at experimental and and npm install react Dom at experimental so if you want to just kind of create your own project from scratch to follow along then that's that's what I did all right so let's go ahead and take this regular old use effect and turn it into fetching data with the use hook so instead of bringing in use effect and use state I'm going to bring in just use and I'm also going to bring in suspense because we want to use a suspense boundary around um where we use the used hook and then down here actually let's create our function first so I'm going to create a function to fetch the data so let's say fetch data and I'm using an nrow function but of course you can use a regular one if you want and then we're going to say const res and set that to a weit and then we'll use Fetch and then the the URL for this is https and it's going to be API Dot uh Chuck norris. and then SL jokes SL random and then what we want to return from this is just res. Json we don't want to put in a weight here because the use hook will actually resolve that promise for us so just return res. Json now down here we can completely get rid of the state so those lines we can completely get rid of the use effect and even the loading since we're going to be using a suspense boundary we can pass in a fallback and put whatever we want for the loading so we can get rid of that if statement as well and then we're not going to pass the joke in as a prop because I'm actually going to use the use hook in the joke item so we can get rid of this and then all we have to do here is say const joke we're going to set that to the use hook and we're going to pass in Fetch data with parenthesis and then that should fetch the data and get it to us and then we have joke which is going to be the object that we get back and that has a value at uh value property and that will be the actual joke now if I were to run this as is without the suspense boundary it's going to continuously make requests so we don't want that so down here let's add in suspense and then we just want to pass this joke item is going to go inside of that and that by itself should work if we come back over here you'll see it does work every time I reload it makes a request and I get my joke now I do want to show the loading I mean you could show whatever you want but I'm just going to use text so with suspense we can just pass in fallback and I'll just do an H2 with a couple classes let's do text- 2XL text- Center font Das bold and margin top five so we'll go ahead and just say loading dot dot dot so now when it's actually fetching it should show that loading and that's it so to me this looks much cleaner than what we just had with the use effect and I'm not saying you should always use this hook instead of use effect um I don't it's not meant for that it's not meant to just completely replace it like it is with used context but it is an option now the next one is for posts so we're going to use the use hook to fetch some post from the Json placeholder API and you'll see it's working because once again I'm using use effect in in this use example 2 post so again we're just going to refactor this to use the use hook and if you want you can pause the video and try it yourself because we're basically going to be doing the same exact thing in fact I'll probably I'll just uh yeah I'll just paste some of this stuff in as well so let's bring in use and suspense and then for the function we're going to have fetch post same thing we're just fetching from a different place this time and returning just res. Json no await and then let's go down here we're not going to pass in post as a prop and then excuse me we can say cons post and set that to the use hook and then pass in here fetch post and let's come back down here we don't need the state we don't need the use effect we don't need the if is uh if loading and then for the I'll just going to paste this in as well so we're just going to return a suspense boundary with a fallback same thing just an add an H make it an H2 and then post items okay so save that come back back over here and now we're fetching our post so very simple now the next one is uh here I all I have here is a button right so if we go to use hook example three it's just a button it doesn't do anything if we go to the finished version what I wanted to do is basically just use the use hook to resolve just a regular promise not a fetch request so if I click download it says downloading message for a second and then it says here's the message and shows us a little react symbol okay so let's do that now this promise that I want to resolve we're going to pass it around through a couple different components so we're going to write a little bit more code than in the last one and we're also going to put it in state so we are going to bring in Ed but we're also going to bring in Ed State and then also we want to bring in suspense and that's going to be from react okay then we'll create a a function let's call it fetch message we're not actually fetching anything we're just creating a promise and we're going to use a set timeout so let's just say return a new promise and pass in a function pass in our resolve and then all I'm going to do is set time out call resolve after a second so after 1,000 milliseconds and then the message itself is just going to be a little react icon so let me just grab that I mean you could put whatever you want in here is the message but yeah it's just going to resolve a promise um oops I forgot my equal sign and my arrow okay now next thing let's come down to the me main message component that's where we want to have our state so I'm just going to paste in our two lines of state so we have message promise and then we have show and message promise is set to null by default show is set to false then on the button we're going to have an onclick and let's set that to a function called download and then we're going to put that right above the return so download and let's set that equal to a function where all we're doing is setting our state so set message promise that's going to be set to fetch message and then we're going to set show to true all right now if show is set to True let's come down here and let's say if show then I want to return a message container component which we haven't created yet and that message container I'm going to pass in the message promise from State as a prop so we'll pass that in else so if not show then we just just want to return our button so we can just grab that and put that in the else okay and we still just see our button if I click it message container is not um is not defined so let's do that I'm going to come up here above the message component and paste in the message container component which just takes in the promise and ultimately we're going to render a suspense boundary with a fallback with this downloading message and then the message output component that takes in the promise so that's the last component we'll put in here and that output takes in the promise and that's where we use the use hook okay so we're resolving this promise right here which is going to resolve to this this uh react icon we're going to put that in a variable called message content and then just show here is the message all right so now let's save that let's come back over to uh example three three click download we see the me we see download message for a second and then it says here's the message and shows us the react icon all right so it's just to show you that use can take in just a regular promise it doesn't have to be fetching data now it can also take in context so let's look at the next one so use context example and you'll see that this actually does work because I have it all set up already using the Ed context hook which we've used for for years now so let's let's go into um use example context theme. jsx and you'll see there's quite a bit of code here but I'll go through and just explain it all there's only two things we have to change here but I want you to understand how it works in case in case you haven't really done this before so we're bringing in create context and we're creating a theme context and with context you have to have a provider and with that provider we're setting our our state so the theme here um to we're setting it to light by default okay so we have a piece of State called theme we also have a function called toggle theme that will set the theme to the opposite of the current state so if it's light it'll be dark if it's dark it'll be light when we call this function and then we just have our provider wrapping the children whatever is passed in is going to be wrapped with this provider and down here you'll see it's wrapping this theme card component which is this right here and we're getting the cont context using the Ed context hook so this is the way we've done it for a long time and we can get the theme state which is either light or dark and the toggle theme function which changes it so here we're just changing the class based on if it's light or dark changing the class here for the H1 I'm changing the class for the paragraph based on light or dark and then there's a button that calls toggle theme and also if it's dark or light it's going to change the text of of the button so if it CLI if we click the button it calls that toggle theme and it changes the state now the only thing I really want to show you here is that we can instead of using use context we can bring in use and where we where we call use context right here in the theme card we can simply change that to use and if we do that and come back here click the button it still works perfectly okay so use contact is going to be phased out now by this use hook as far as I can tell as far as everything that I've read remember I'm this stuff is all new to me too so if I do get something wrong feel free to let me know uh also if you have other features that you want to add if you want to make a poll request to the repository I'd be happy to look at it all right so now that's pretty much it for the Ed stuff now let's take a look at some of the actions so this one here we have a a post form and I basically just want to connect an action that will allow us to submit a post and show it down below so we're doing some things in addition to just showing you how the action works so let's go to action example one post and basically we have our post form no action no onclick or anything like that notice we do have name attributes in the input that's really important um I'll talk about that in a second and then down below I'm just embedding that post form so the first thing that I want to do is go to the form itself the form tag and we just add an action attribute so if you've ever used like PHP this is kind of the same thing and that's kind of a people joke about that now but we are kind of reverting backwards to how it used to be which is fine because I didn't mind the way it used to be as long as we also have the ability to to create Dynamic uis I like the the server stuff and and we're not even doing any server stuff here because action is now um allowed in client only apps so I think that's really cool so you can call this whatever you want I'm going to call it find uh not find form action and then we're just going to create that function here const form action now since it's a it's an action we have access to form data okay and then what what I'm going to do is just create an object called new post so we'll call it new post jeez I can't type new post and set that to an object with a title now remember since I have this name I have name title here and I have name body here so I can access those in here with form data. getet okay we have a get method and then pass in whatever the name is that you're looking for so title and then let's also do body change that to body and then let's just do a console log of the new post and then if we come over here and let's open up the console and just put whatever in here submit and there we go so I didn't have to do an onclick and use an event handler I simply added an action just like back in the day so now I mean that's pretty much it as far as how do you use an action but I just want take it a step further and finish up this little project so we can add posts so I'm going to change the console log here to add post and since this is a a different component I'm going to pass in add post as a prop and then down here where we actually call Post form that will have ADD post and we'll set that to a function here called add post I mean if you want to change up the names you can but we'll do that and then let's say const add post uh we'll do that now I do want to have some state so let's bring in up top here let's uh let's import use State and then let's add the state so let's see right here we'll say const and let's say post set post set that to use State and we'll just set it to an empty excuse me an empty array by default all right and then in the add post we just need to Simply call set post and what I want to set it to I'm going to pass in a function here because with this function I can get U my previous state so previous post and I just want to set it to an array where I spread across the previous state and then I just add the new post all right so we can do that now this will add it to the state if I submit but we're not going to see it anywhere because we haven't we haven't added that yet so let's come below the post form and let's take the post in the state let's add map and then in the map we're going to pass in post and index set that to a set of parentheses and in there for for the jsx we want to return let's have a a f a a function but a component called form item all right and we'll pass in the key which I'm going to use index and pass in the post which is going to be the post okay and then that post item component I'm just going to paste that in up top here very simple takes in the post prop and shows a div with an H2 and a paragraph gra so now let's come back over here and just put in whatever submit new post is not defined let's see where did I screw that up um so let's see we have our add post so right here that needs to take in new post so now there we go so now I can just add post all right so that's that that's that's how you can use an action now we're going to do another example to get familiar with actions and it's a little bit different so basically I'll show you the finished version First and we're going to have these add to cards and each one of these is a form with a button and a hidden ID and basically I want to make it so that when we click the button in that form it calls an action and then adds it to the cart so you can see that that JavaScript definitive guide is in our cart if I click this one that gets put in the cart all right so that's what we want to do so so let's go to action example two and all I have right now is a cart if we look at the code the main component is called shopping cart it has a piece of State called cart with a hardcoded traversy media ebook it has an ID in a title we have a cart display that gets passed in the state of cart and then it basically just Loops through and shows the items that are in the cart and then up here we have our add cart to form which we haven't embedded anywhere but this is the form that I want to add the action to so before we add the action let's actually show some of these add to card forms and it takes in an ID a title and then the add to cart function so down at the bottom here let's go uh under the yeah we want to go under the cart display and let's say add to cart form we want to pass in a couple things here so ID let's set that to a string of one one and let's set the title to uh let's say JavaScript the definitive guide and then it also needs so ID title and then it has that add to cart function so we'll have to have a function here called add to card then I'm going to paste that down or copy that down set that to two let's call this one JavaScript the good parts and save that and now if we look at uh at to card is not defined so basically this needs to be defined in this component so let's say const add to cart okay so now we can see our buttons and what I'm going to do now is add an action to the add to cart form so let's come up here let's say action set that to and again I'm just going to call it form action and then in the add toart form let's say con form action now this I'm going to make this function asynchronous because basically it's going to call the add to cart down here which is going to have a promise okay so basically we're just going to have like a set timeout in a promise similar to what we did with the message so this um all this is going to to do is let's do a try catch and then we'll say await um await at toart and then in this we want to pass in a couple things so one is going to be the form data so remember when we submit this and we need to pass in form data here just like in the last little project when we use an action we have access to that form data and remember you want to have a name and what we want to get is the ID so you can see that has a name of item ID so that's important and then we're just uh awaiting calling add toart passing in the form data now the form data only has the ID we also want to pass the title in here as well which comes in through a prop and then in the catch we'll just do a console log error okay so now this gets submitted to add to cart which is going to get submitted to this so what we want to do in that function is uh first of all we want to make this a sync and then we're going to pass in form data title okay so we're passing this form data around and then let's get the ID so we'll say ID equals make sure that's string so string and then in here we'll do form data. getet and we want to get the item id make sure that that matches the name then I'm going to basically simulate an Ajax call with a promise so I'm going to say await promise uh or await sorry new promise and then pass in function resolve and then again I'm just going to do set time out call resolve and then the time I'm going to wait is just 1,000 milliseconds then once that happens once we wait that second then we're going to set our cart okay we're going to add it to our state and that's going to take in a function with the previous state of cart and then we're going to set it to an array where we spread across the previous state and then we add an object with the ID and the title oops ID comma title all right and then finally we'll just return an object with the ID so let's try it out we'll come over here we have this traversy media ebook could probably just get rid of that and just pass in an empty array and then I'll click add the cut Waits a second gets added click it waits a second gets added all right and it waits a second because of this here if I get rid of that and we try it it'll just add you know right away okay so that's just another example of using an action now the next thing I want to give get into is the use form status example and we're going to use our post example for this so This does work as far as adding posts but what we can do with use form status is we can we can have our button either disabled or have it say some different text or do whatever we want while the form is actually submitting so let's go to the form use form status example and it's called post jsx this is basically the same code we left off with back in the um the first action example so what we're going to add to this is up top we want to bring in our use form status now this is going to come in from react Dom not react so that's important to remember so let's say use form status and that's going to be from react DD now one of the pitfalls with this and it says this in the documentation is that this hook only returns status information for a parent form and not for any form rendered in the same component so instead of adding the stuff directly to the button here we're going to put this button into a separate component so let's grab the button and let's cut it and then we'll go right above uh let's go above the post form and let's say post or post form form button uh button component and we'll call this submit okay so this submit button I'm going to return and then paste in the button here and what we can do is get the pending state so let's say const and then destructure pending from use form status okay and and I'm just going to console log pending so you can see basically it'll start as false and when it's submitting then it will uh it'll turn to true and then what do we want to change in the button when it's pending well first off let's make it disabled so we'll say disabled and then set that to pending which is going to be true or false and then for the text let's do this let's say if pending then we'll say submitting dot dot dot else then we'll say submit okay so we're changing the state based on that then back down here where we cut the button let's just embed um or let's call it submit button so up here say submit button all right so now I'm going to save that and if I come back here and reload this put some crap in here submit you'll see it did flicker so it is working but I want to I want to make that last a little longer so what we can do is go into the submit or I should say the action this form action and let's go right above the uh the new post here and let's say simulate uh simulate a delay of 2 seconds so we'll just do set timeout uh actually we going to make this a promise so let's say await new promise and then pass in resolve and then set time out resolve and let's do 2 seconds so 2000 milliseconds okay and yeah this is already asynchronous so let's save that and now if we try this again you can see for two seconds it says submitting and it's also disabled so I can't keep clicking it okay I can't click it until this is done all right so that's that's use form status so now we're going to look at use form state so let's go into use form State and then add to cart form so so if I show you the finished version of use form State basically what I want to do is attach a state of a message and for this item for this form if I click we get added to card for this one let's say this one's out of stock so for this one the message will be couldn't add to cart item is sold out so we can attach the state to the form with use form state so let's go back to our version here so use form State and I just have the buttons and they they don't do anything right so basically we just have um our add to cart form now this is I'm doing it a little bit different I exported add to cart form and then in the app jsx for the route that we're that we're visiting right now I then embedded them here I probably should have embedded them within the file but it really doesn't matter for this for this case now the first thing that I want to do is bring in use form state so let's import use use form State and just like use form status this is going to be from react Dom not react okay so we get that now let's go into our add to cart form and and we're going to say const and then in Brackets we're going to have the state which I'm going to call message and then we also add the form action that we're going to connect to the form and then set that to use form state which is going to take in two things the function that we want to call which is going to be add uh add to cart and then also the initial state which I'm going to which is going to be null so it's the initial State for the message and then for the form we're going to pass in an action attribute and set that to form action okay so whatever you're submitting that action to should be this function here then what we can do is just create this add to cart so let's do that down at the bottom here uh yeah we'll just go right here and let's say const add to cart okay and then what this is going to take in is the previous state and then any query data and we can get the item ID from the form from that hidden field with uh with the query data so let's say const Item ID and set that um equal to query data so it's it's much like using form data except it's query data doget and then Item ID so whatever the name so remember this is going to be whatever the name of the input where you want to get the value so that'll get the item id then I'm going to say if the item ID is equal to one then I'm going to return the string of added to cart okay else then I'm going to return the string of could not we'll say could not add to cart item is sold out all right so whatever I'm returning here is what is going to be put in that message now I can show that message wherever I want so I'm going to go under the button and let's do a class of margin top-4 we'll do text- small and let's do text- gray 700 and then we can output the message so now let's try it out if I click this one here we get added to cart I click this one could not add to cart item is sold out so I really like this we set the action we pass the action into our use form State we call a function and then here we can just return what we want for that state and we can do whatever it is that we want to do in the add to card all right so now the last thing that I want to look at is use optimistic so if we go back to let's go right here use optimistic and right now we just have a message box with a message this doesn't work if I put something in here I'll show you the the finished version so basically I want to be able to put something in here and then when I submit you can see it says sending for a second I think it's one it's either one or two seconds and what it's doing is it's just showing a temporary UI while we're waiting for a promise to um to resolve whether that's you know a submission to a server or what we're not actually using a server we're just going to use a promise with a set timeout but same thing we're just we're we're waiting for the response and we want to show a temporary UI and you could show anything I'm just choosing to show the message as well as that sending okay so let's um let's jump into use optimistic and then this message. jsx and I'll just go over this real quick so we have a main message box component that's where our main messages state is and we have a text value just an object with a text of message one that's what we're seeing on the screen we have a thread component that it's being passed into which is right here being pass messages we're showing a form in the thread component and We're looping we're using map on messages and just showing the text okay and then we have our form with no action or anything we're going to add that um and yeah there's nothing really going on here so this right here is ultimately the the the function that we want to call deliver message and this is going to simulate a a delay so basically this is where we want to show our pending UI is during this two seconds before it Returns the message that we submit okay so I just want to um to go to the documentation real quick to show you how this works so it works sort of like used State except the state we're talking about is the optimistic or the pending state so we pass in or we set an array here with optimistic State and then a function to add to that optimistic State and then it gets passed in the actual state which in our case are the messages as well as an update function that looks like this and that update function takes the current state and the optimistic value okay whatever you want to set so let's just grab this right here and I'm going to put that that into the thread component okay cuz that's where I'm showing my messages and then I'm going to change uh a couple things up here so let's see instead of calling this optimistic State because you can call this whatever you want let's call it optimistic messages because that's what we're H what we're putting in it in the state and then we'll call this add optimistic message and then here is going to be your actual state which is going to be the messages okay so our actual state is right here and it's being passed in as a prop passed in here and then I'm putting that here as the first um argument of use optimistic and then for the update function the current state I'm just going to call that state and then the optimistic value so that's going to be we can call this whatever I'm going to call it new message all right now now we can get rid of these comments so now we want to we can get rid of the curly braces cuz we're we're going to return an array and spread across the current state and then we want to add the new message which is going to be an object with the text which is going to be new message and then like I said I want to have a sending value so we're going to say sending and set that to true now this sending true isn't part of the actual State the actual State just has a text but you can have any state you want as your optimistic or I like to say pending State because that's what it is it's it's what what's going to show in the UI while while this is pending all right so this ad Optimist actually before we do that let's take our optimistic messages and instead of using map on just messages we want to use it on our optimistic messages then we have access to the sending value so under the span let's do uh let's say if message do sending which remember it's part of it's only part of the optimistic state if that's sending then we're going to show a small tag and let's just add ml1 and text- gray 500 and I just want to show in parentheses the text of sending dot dot dot okay so now we need to be able to call this add optimistic message and that's going to be called in the form so let's pass in here a prop of add optimistic message and then set it to that function to this function right here and then in addition to that we we're going to pass in send message which ultimately is going to be called in the main main message box component to actually send the message all right now let's go into this form and we're passing in both of these functions so up in the form let's pass in for props we have uh add optimistic message and send message and then let's see we're going to add an action just like we've done in the past few projects and we'll call this form action and then above the return let's say const form action okay and then that's going to take form data because it's connected to an action and this is where we're going to call add optimistic message and we want to pass in whatever is in this input the message which has a name of message so that means we can use form data and use doget and message okay and then after that we're just going to call send message which ultimately it's asynchronous so we need to do await send message and that's just we're just going to pass in form data itself okay and we have to add a sync to the form action and then that should do it so now let's go down to let's see so the thread here we want to pass in send message and then down here where we're embedding the thread we want to say send message and then we'll have a function called send message okay and we'll create that right here so send message all right now send message takes in the form data right cuz where we actually call that is right here and it takes in the form data and then it's being passed up or or I should say the function is being passed down into message form and then it's also being passed to the thread and then ultimately it's being called here now this send message we want to make this asynchronous and take in the form data and then let's create a message a variable called sent message and we're going to set that to await and then this is where we call that deliver message and that gets passed in form data uh and then actually let we want to pass the message in so formdata doget message and then the last thing we want to do is call call set messages cuz we want to update our actual State and we're going to pass in a function here and take our current messages and then we just want to add the new one so we'll set that to an array spread across current messages and add a text of sent message and let's see use up I didn't bring in use up optimistic so let's bring that in so now if I put something in here let's say hello and we see sending for two seconds and then it disappears all right and again I could put any state that I want in here for the optimistic message and it has nothing to do with uh with the main state it could be something completely different okay and then I'm just saying if that sending value is there then show that show the text sending and you can get rid of the initial message here as well all right and that's it so I know this was a pretty long video but rather than just tell you the features um I wanted to just give you some examples and hopefully you know you can find some of them useful and that's it thanks so much for watching and I'll see you in the next one

Channel: Traversy Media

Views: 52,620

Keywords: react 19, react, react.js, react 19 features, use hook, use() hook, react actions, react form actions, useOptimistic, useFormState, useFormStatus, react compiler

Id: EPaLg4U_K1o

Length: 54min 26sec (3266 seconds)

Published: Wed Mar 06 2024