React 19 STABLE - I Can't Believe They Changed This

react 19 is stable I will quickly list out the most important features for you if you've been using a framework like nextjs you have already started using many of these features so for example we now have server components in react so by default in a nextjs application in the app router all the components are server components by default and one of the things we can do is we can mark them as async and we can fetch data directly in here without use effect I can just fetch my data like this I get a response and

I can just render that out here and I get a bunch of posts here when I go to that page a server component only runs on the server side so you can reach out to your database and whatever you render out here as the markup that will be sent to the client react 19 also introduces the concept of actions so in nextjs you've probably heard of server actions but react talks about actions in general so let's say I have a form here for example and if I submit this form I want to send this data

to my back end so here in the nextjs application what I can do I have a form here with a simple input just for the time now and a submit button now when I submit this it will use what I specified here for Action what I specified here is actually a function and specifically a function that runs on the server only I Define that function here in an actions file with use server at the top this creates basically a what's called a server action so this will run only on the server and I get the

form data right here I can then get the title from that form and log it here on my server or of course what I could do is I could add it to my database let's say if I want to see the log I can open up my ter terminal because it's on the server side I can say test create post and you can see I'm getting a log right here I don't have to do anything with fetch or xos or something like that to get the data from the browser the client site all the way

to my server side so here in the network tab if I submit this form you can see there is still a fetch call but my framework does it automatically for me so you can see a server action is actually just a network request a post Network request to the URL on which you're using the server action so basically we can trigger a function on the server to run from the client side like this but not only in forms it can also be an on click or onsubmit right like the old school way I can still

do it like this I can still do it and the major benefit of this is that we don't have to set up an API end point manually ourselves it's all handled for us behind the scenes by our framework so in this case nextjs but these actions are even more powerful because they integrate with some new hooks that we now also have so we have use action States this was previously called use form State this is a bit confusing because it seems like you can only use those actions in a form which is not the case

I can use this create post wherever I want also outside forms so use form state has been renamed into use action state so this is a useful hook because it will give us a pending State as well as an error state which are two common things we often want to deal with so instead of passing the action directly to the action attribute like this we can for we can actually just pass it to that hook that hook will then give us this action here which we then actually use on the element so now when that

Network request is happening we get access to a pending state so we may want to disable the input field for example while it's making that request and we may actually want to change the text here something like this let me actually add some delay here so we can actually see the pending State properly I will make it 3 seconds longer so I'm adding a timeout here so now we can see the pending state but besides that we also get access to whatever we return from here so let's say something goes wrong with adding it to

our database we would like to return an error so here I'm returning simply a string here whatever I'm returning from that server action I will get here as the first variable here sometimes people call this state because it could be anything I'm returning from here but typically I'm only returning an error otherwise I'm not returning anything so for me that means it's always going to be an error in case something gets returned from that server action and I can then use that here to Output that error message so very nice hook the only downside in

my view is that the signature of your server action changes so now we get a new parameter here which we need to add otherwise we get an error and this will keep track of the previous state basically what you returned previously I haven't found great use cases for this parameter yet so I'm not using it here but we do need to add it now if I submit you can see we have the pending State and after a couple seconds we get our error State like this as well I have a dedicated video on the use

action State hook so check that out so that's the use action State hook and previously it was called use form State besides that we also had another hook that you may have seen before which is the use form status hook and so this one has been renamed into use action state but this one now is actually still part of react 19 so I can use that hook in a child component here in the form so let's say I create a dedicated component for that submit button I can replace it like this now in this component

I have the use form status hook and it also gives me access to the pending State now if I try that again you can see I still have the pending State another hook that integrates very nicely with these actions is the use optimistic hook so let's say below the form we want to output value here that the user typed when we submit the post remember submitting the post can take a couple seconds but we would like to immediately show it here and we know that usually it's going to succeed so we might as well be

optimistic about it this hook so this Hook is actually quite similar to uh the U State hook but this is for that optimistic use case I'm going to have an optimistic title value which I will just output here below initially it's uh nothing so we don't see anything here so instead of directly writing the server action like this we can provide a client side function basically just a normal JavaScript function here because what we want to do here is we still want to invoke that server action right and so this needs to become async but

before we do that we also want to set the optimistic title Now with an action you will get the form data like this so we still want to pass the form data to our server action like before and actually since we're passing it like this now not with the use action State hook we now also don't have this first parameter anymore so we can get rid of that if you invoke it like this and now we can also take the title right so we can just get the title like this and just set the title

like that now before we make that Network call to our server s side we're first going to hopefully see the title so let's see what we get you can see I already get the title here let me zoom in let me show it again so new awesome title you can see it immediately shows me here it's optimistic while it's making that Network call waiting for that response from the server action we can already show a value right here right so we can be optimistic about it and it nicely integrates so as the server action is

finished it will actually also automatically remove it right so this entire thing is actually also an action an action can be a server action like this one if it runs on the server but an action is can also be a client side function basically right so an action is just a function that's how I think about it and we can invoke another action and in that action we can invoke another action right in this case a server action so don't worry if you're a little bit confused uh all of a lot of this is new

we talk a lot about this in my react and nextjs course as well so highly recommend that you check out that course you can find a link in the description react 19 also has some new things for ref so let's say we need to control that submit button from a parent component we need to add an in this component but we need to have access to it here so we could create a ref here but it needs to be attached in this component so we need to pass it along so previously we could already do

this you could pass a ref like this now to actually receive it here that was a major hassle but now it's just like any other prop I can just get the ref like this and attach it like this previously if you wanted to do that you had this monstrosity with the forward ra and then you have these uh types so you would have to type the type of the ref that was the first type even though ref comes after the props here in the function signature itself and then you have to type the props so

this syntax was not great to put it mildly so we now have a much simpler syntax with that if I want to type the ref it's going to be something like this there's also change for the react context API so previously if you were creating a context provider component you would do something like this right so you would have dot provider you would use this variable from create context and then you would do do provider you don't need to do that anymore so now you can just leave now you can just leave that off now

if I want to consume the context I also have a new hook the use hook and one of the things I can pass here is that context variable as well so I can pass submissions count context here I do need to import it and I can then destructure the submissions count so now I can just use it like this so now if I want to keep track I also need to set the submissions count increment it so I can use the setter function and now after the server action returns we increment the number here with

context API is this a recommended way of consuming the context API right now I would have to wait and see a little bit before I would recommend that uh for now I would stick to using a custom hook but one of the benefits of the use is that it doesn't follow the rules of hook so if you have some condition right something like this it can it still works after that condition which is not true for other hooks right so it's a little bit more flexible and it also consumes promises so if you're fetching data

in a function for example here I'm fetching data I'm returning this response. Json so what I'm getting here is a promise so when I refresh now I'm getting these posts here with this hook like this it's in that component the benefit is that you can wrap it in suspense and provide a fallback to to deal with the pending state so now if I refresh you can see there's well let me actually add uh some delay here of 1 second now you can see when I refresh here you can see there is an in there was

an initial loading State now it's unclear whether this is the recommended way of doing it it seems this Hook is going to be mostly useful for libraries so you as an application developer may not work with it like this although it's still has to be seen some of these things are very new and it takes some time before it's clear what the exact use cases are going to be as of recording I would probably not use the use hook what about react compiler the react compiler can automatically optimize certain things in your react app so

for example very common situation is we have these posts but we want to sort them let's say alphabetically right just some computation on the post this is where I'm sorting but it's computationally heavy so I don't want to do it every rerender I want to avoid doing that as much as possible so I can use the use memo hook so it will only run this when this variable in the dependency array here changes if post change we're going to run this posts. sort line again and this is a manual optimization I'm adding here the idea

with the react compiler is that this is not necessary anymore and that it can automatically detect some of these things to optimize for for us however direct compiler is not completely stable in this version yet in nextjs I can enable it in the next convic like this so overall really nice release it's nice to see react improving and uh getting that version 19 stable there are many other things as well like better hydration messages I know a lot of you are struggling with hydration errors in nextjs I will make a separate video on this soon

as well I'm Wesley by the way I'm the creator of the professional react and nextjs course if you want a master react and next CH I highly recommend you go through that course I spend a lot of time and energy on it making sure it's the best course available we have a lot of great reviews I would say check them out you can find a link in the description I'm also sponsored by kind I'm a brand ambassador for them they have a wonderful solution for authentication so if you're looking for a solution for authentication check

them out you can find a link for them in the description as well in any case I want to thank you for watching have a nice day bye