Discover the Latest Features in React 19: An Overview of Actions, use(), Compiler, and More

learn all about the exciting new features coming with react 19 including baked in ways to handle actions optimistic updates form statuses the new use API and more you’ll also learn about the new open source compiler that automates performance optimizations behind the scenes Bob Zero from scrimba developed this course join him to explore these Cutting Edge updates and more ensuring you’re fully equipped to leverage the latest advancements in react development hi there and welcome to this mini crash course on everything that’s new in react 19 at the time of recording react 19 is in release candidate status which means that it is very close to becoming the new major version of react and so I thought it would be really helpful to go through some of the new features that are coming in react 19 both new apis that are being introduced as well as general improvements to the react library and the react ecosystem in general in this course we’re going to be starting actually with something that came with react 18 called use transition and the concept of transitions in general and there’s actually two reasons we’re going to start with that first of all if you’ve taken my introductory or Advanced courses in react you’ll know that we don’t cover used transition in either of those courses and so this is an opportunity for me to teach that topic but secondly the idea of transitions is going to be crucial in understanding the new actions that are coming with react 19 however before we get to actions we are going to very quickly talk about the new compiler that’s coming with react this is a really exciting way that will simplify some of the performance optimizations that we used to have to make manually with react after that quick lesson we will jump in and talk extensively about this new concept of actions which is a great new paradigm in react that allows us to handle mutations in our data in a slightly different way actions will help us segue into the new hooks that are being introduced in react 19 we’ll see a really quick update to how we can pass refs to custom components we take a look at the new use API and we’ll top it off with a number of other miscellaneous improvements that are coming to react my name is Bobs roll I’m generally responsible for the react curriculum on scrimba these days I am most active on X online so if you wanted to give me a follow you can click my screen name there and it will take you to my profile and without further Ado let’s Jump Right In we’ll start learning about what’s new in react 19 after we play a little bit of catchup learning about transitions one of the headliner features in react 19 is a topic called actions however in order to understand actions it’s important that you have a solid grasp on the concept of transitions in react now you may already be familiar with transitions if that’s the case you are welcome to skip the scrim in my other react courses which I teach on scrimba I don’t yet cover the concept of Transitions and so for those that have taken my other courses this is a way to sort of catch up on the concept of transitions before we talk about actions now the example that I have here is only a slightly modified version from what you can find in the used transition documentation on the react Doc’s website so if you’ve seen that then this should look kind of familiar this would be a good time if you want to just peruse around the code and see if you can make sense of it but I’m just going to give a quick highlevel overview of what’s going on here inside of our app component we’re maintaining some State this is kind of like mimicking a react router scenario where we’re displaying something different depending on which tab is currently selected we have these three buttons here which essentially just set the state of the tab there’s also some Styles happening so we know which one is currently active and then down here we are conditionally displaying different elements depending on which tab is set in the state if the tab is selected as products then we instead of rendering an H1 we render this products component so let’s come down to the products component this product component will iterate over an array of products these products are coming from data. TS this is using a library called Faker JS to create an array of 1500 fake products and so it iterates over that and for each one of those 1500 products it renders a slow product component the slow product component has a little artificial slowdown for 1 millisecond so if we’re rendering 1500 of them it will slow down for 1500 milliseconds or 1.5 seconds and we can see this in action if we click on the products tab I’m going to click it right now and that took about 1.5 seconds for this to finally show up on the page the concept that we’re talking about Transitions and the use transition hook it’s not going to fix that problem of it taking a long time for products to show up however there is a bit of a bad user experience that happens if we try to click products and then click to another tab let me go back to home I’m going to click products right now and then about right now and let me do that a little bit faster so we’ll click products than about okay so products never loaded but it did wait before it shifted me over to the about page this is something that I do all the time when I’m browsing the web I click something and then realize oh actually I wanted to click this other thing instead the way react is working under the hood and this is the important part to understand when I click products react adds the changing of the state that’s happening right here when I’m setting the tab to products and it puts it in a cue of State changes and it’s going to go through and process that cue one at a time from top to bottom there’s a bunch of other things that are happening regarding concurrent mode and state change batching and whatnot but if you think of it this way it will help make sense of use transition when you click products it adds this set tab to products at the top of this queue and then when you click about immediately afterwards it puts that in the queue as well below the changing to products as such react is going to prioritize switching to products first and then it will switch to about afterwards and because products is a really slow component to load we get this experience where we click products about and and it takes 1.5 seconds before it eventually just switches immediately to about and the whole switching to products just looks like it never really happened this scrim has gotten a bit long already I want you to take time to look through this code make sure that you understand it and in the next scrim we’ll talk about how we can solve this using used transition let’s see how we can use transitions to improve the user experience that we have with this tab switching issue that we’re facing again what’s happening when I click products and then click about immediately is react is queuing up those two State changes to happen back to back and first it tackles changing the state to products however changing our tab to products also includes rendering our products array which has 1500 slow products in it and so that state change takes a while to complete once it has completed that it immediately starts tackling changing the state to about which takes almost no time at all and so we get this phenomenon where we click products then about and it takes a while before it just immediately switches to about the idea of transitions is it allows us to teach react that certain State changes are interruptable in other words if I tell react that calling set tab should be interruptable in effect telling it that it’s a lower priority State change instead of queuing up a switch from home to products and then queuing behind that a switch to about when I click products and then immediately click about react will say well I can stop doing what I’m doing I don’t need to complete switching to products before I switch to about because this state change is discardable or interruptable it’s a lower priority State change let’s see the Syntax for implementing that it’s really simple and then we’ll see how it’s working in action in order to set up a transition we will use the use transition hook this again was introduced in react 18 we haven’t yet gotten to the new react 19 features and at the top level of our component we will call our use transition hook use transition simp SAR to use state will return an array which has two items in it the first one we will call is pending we’ll talk about that in a second and the second one is called start transition start transition is a function and we’ll go ahead and call that start transition function this is a lot of functions but it takes a callback function as its argument and whatever state changes we make inside of this callback function will be marked as a lower priority or an interruptable State change so I moved my set tab just inside side of my start transition callback function here this is essentially all we needed to do to mark this as a lower priority State change okay Moment of Truth I’ll click products than about perfect it has discarded the state change to products because it realized that there was a more important state change happening and that was the state change to about as such react was able to just discard the entire rendering of our lengthy and slow products component in favor of switching to about and in the end our user experience is better than it was okay let’s talk about this is pending variable this is the beginning of where we start seeing that react is providing some really interesting things for us to use the is pending value that we get here is something that react gives us so that we can in our code provide some immediate user feedback as to what’s happening behind the scenes because notice even when I click products there still is no user feedback in the 1.5 seconds that it’s taking for the products page to render and if you’ve ever handled something like this before you’re probably very familiar with the idea of having to manage this yourself and saying something like loading and set loading is equal to a call to use State and probably initialized as false and then when you switch tab you would set the loading to true and when it’s all done you would set the loading to false and maybe you handle errors and I guess that would probably happen right here and this kind of boiler plate just is so so common that react built it right into the value of is pending which is a Boolean value as to whether or not the transition is still happening now your imagination is the limit as to how you can use is pending to make your user experience so much better I’m just going to do a really quick thing down here where on top of rendering these three different things I’m going to say is pending and just a paragraph that says loading and there might be a better way to do this but just so that I’m not also showing these if the is pending is happening I’m just going to add not is pending on top of here here so that it’s only rendering either the pending state or one of these items okay let’s refresh I click about I click home and if I click products we’ll see we get a loading State before all the products finally load this is a much better user experience now I could do the same thing with my setting of styles so that when I click products notice when I click it nothing happens to the button I could set up another style that says if is pending is true then change the style of the button to some sort of pending State showing the user that they did successfully click this button again the sky the limit for what you can do so this is really nice that react is handling this for us hopefully this gives you a good reminder of what the used transition hook does or if this is your first time hopefully that makes sense because now we’re primed to start discussing the new topic of actions that was introduced in react 19 one of the biggest features that was just announced with react 19 is a brand new compiler this compiler that was just released in beta is an evolution of something from a number of years ago that was called react forget and essentially what this compiler can do is understand your code ahead of time and translate it into code that is more performant and bypasses some of the limitations with react that we used to have to handle manually if you’ve taken my Advanced react course here on scrimba you do have to be a PR member to access that course I have an entire section all about performance it goes into use memo react. memo use callback and as it turns out with the compiler we are not going to need those things anymore the compiler can take your code understand where the potential performance drawbacks are and it can automatically handle those use cases so at least how it’s being build at the current time we just will no longer need to really understand or use react. memo react. use memo or react. use callback at the time of recording the compiler documentation was just released a day ago so you can click the screenshot here to go over to the compiler docs and as you see it’s still under construction so it’s very possible this will have changed by the time you get there not only that but the compiler was open- sourced and so there’s a lot of really exciting things happening with the compiler behind the scenes in the op Source community so it’s certainly possible that things will change soon in these docs you can see how you can get it all set up so if you wanted to play with it click the screenshot here to go to the docs and learn how to get set up as of now that’s pretty much all there is to say about the compiler so now we’re ready to move on to the next main headline feature of react 19 and that is actions another main headline feature of react 19 is a topic called actions and the concept of actions have been around in the web for a very long time essentially what we’re touching on here is anytime you want to make what’s called a mutation to your data when you’re interacting with data from say a database usually you can divide these intera actions with that data into two categories one being loading or getting that data to display to your users and another being to mutate or change that data so that it can be updated in the database actions touch on that second category of making mutations in the react docs they say that by convention any functions that use async transitions are called actions personally I think this definition is a bit more confusing than it might be helpful although once you understand the concept of transitions as we talked about with Ed transition it starts to make a little more sense but essentially this boils down to giving you the ability to make data mutations in a native react way and we’re going to see two ways in which that’s the case the first and maybe most straightforward way that we now have using actions in react 19 is to provide the action prop to the form element in the HTML spec the form element is allowed to take an action prop and you might already be familiar with this if you’ve been developing for the web for a while typically the action prop is set to a string the idea being that when a user submits a form it will send that data to the end point or to the route of that string where the code will then handle the form submission validation and everything like that in react 19 you now can pass a function to the action prop in a similar way that we passed an onsubmit Handler to handle form submissions previously in react this is what we’ll be looking at first but really quick another built-in way to handle a lot of common use cases with actions is to use a new hook called use action State this gives us some additional tools that can make these common use cases a lot simpler but we’re going to get to that in just a minute if you happen to have taken my react router course here in scrimba you might remember a scrim where I specifically go in to talk about how forms in react are just really challenging to work with they’ve been a paino in react since essentially the beginning of react and in my personal opinion this direction of using the action prop and passing aun function to it is quite a bit simpler so let’s actually take a look at that let me walk through the basics of this code first and then we’ll see how we can simplify it using this new form action in typical fashion with react we tend to control the components of our inputs this means that instead of allowing the form to maintain its own information and its own State kind of like forms were built to do from the beginning of the web we use react to maintain that information instead so we’re tracking the input text for our input field and that means that on every keystroke of this input field we update State we’re calling this handle change function and it’s updating our state right here so that react can then display that state as the current value of this form something has always felt a little off to me about this and I’m sure that there are great reasons for this but personally it feels a bit more convoluted than it needs to be then our form has an onsubmit Handler it prevents the default from happening because if you remember the default is for that data to be sent to another page which requires some some kind of navigation event on your form in JavaScript if we don’t include this then you might already know this but the page will just completely reset and our JavaScript won’t continue to run when it’s trying to process the information from the form so we add this prevent default and in this case we have this fake function that sends the input value from the form over to our database it takes a bit of time for that to finish and then if it’s successful we take the new name that comes back from this function call to our database and we set it in state that’s what gets displayed here here in this blue text we reset our input back to an empty input and in this case we’re just console logging any errors that might happen along the way if you’ve been writing react for a while you might already be very used to this but with form actions there’s now A Better Way new to react 19 and you might already be familiar with this concept if you’ve used nextjs is we can now provide an action prop so I’m replacing this onsubmit with a prop called action and we can pass to it a function this function will need to change a little bit though since action is not an event handler like onsubmit was we’re not receiving the event as the parameter but instead we’re receiving the information from the form I’ll call it form data of course we can call it whatever we want and this form data object is the native web form data object you could go to the mdn docs right now search for form data and you would find the object with its properties right there this is awesome because it means I have access to all of the information from the form without me having to track it in local react State technically speaking I did have access to this with the event where I could grab the which was the form and I could use that to get all the information from the form as well but this way is a bit more native and a lot more intuitive now that we’ve changed the signature for our handle submit there’s a number of other changes that I need to make first of all I can get rid of event.prevent default because I don’t want to prevent the default anymore or rather that’s being handled for me by react because I’m going to be grabbing the information from my form using this form data object I no longer need to track my state so I can get rid of my input State down on my actual input I can get rid of this value and onchange properties awesome and instead of passing in the input because I’m not tracking that anymore we’re going to do this a slightly different way in order to grab data from my form I can call form data. getet form data objects have a doget property and this allows me to get information from my form based on the name attribute for the inputs in my form well in my case I don’t have a name attribute so let’s go ahead and add a name attribute and in this case we’re tracking a name or a username so I guess it’s name equals name in this case to be clear this part needs to be name this part can be whatever you want maybe a name field was a confusing choice but that’s okay so because the name of this input is the string name I can use doget name and this is how I can get access to the data from that form input let’s look through the rest of this new name should stay the same I don’t need to set input anymore so I can get rid of that line of code and as far as I can tell oh we can probably rename this from handle submit to I don’t know whatever we want maybe form action and we’ll just change it down there just to be clear that we’re not doing a submit Handler anymore and our code is quite a bit simpler let’s go ahead and hit save oh and I can get rid of this whole handle change function cuz I’m not using it anymore okay let’s hit save again and let’s try typing in Bob’s roll I’ll hit enter which will submit the form a couple seconds later it changes and updates exactly like it was before I personally really like this direction that react is heading in using the native form data object using forms with their native capabilities of maintaining their own State and accessing that state in the way that forms have been dealt with since the beginning of forms on the web okay now this isn’t the full picture there are a number of other things that we would normally want to take care of manually but since we’ve already covered a lot of ground in the scrim feel free to play with the code as always and when you’re ready we’ll move on when we’ll start talking about other benefits that come with react 19 at this point we’re really only handling the happiest path when it comes to submitting our form in other words we’re assuming that the call to the database is going to work and right now we are catching the error but we’re just displaying it in the console usually we’d want to to provide some information to the user about what went wrong also we have no kind of pending or loading State happening on this form right now so when I type in a new username and I hit enter right now there’s a lag of time that happens while it’s speaking to the database before our current user is able to update and we don’t give any feedback to the user that submitting the form is actually doing something in the background historically in react this would mean that we would need some additional States and so we would set up something like a loading and set loading this would be with State and maybe we’d initialize it as false and then pretty imperatively or manually we’d have to go to our action and say okay first we’re going to set loading to true and then at the end of our block here we’re going to set loading to false and if we wanted to do the same thing with error States we would need to track the error and so we might have error and set error in state again and maybe we’ll start it as null and I need my equals there of course then at the beginning of our form action we’d want to make sure that we reset any errors that might have happened from previous submissions that had errors and here we might set the error to the error that comes back okay and then normally with those new pieces of State I would conditionally render some elements on the page like a paragraph that says loading or a loading spinner and probably a paragraph that says that an error has happened in this case because our form action is happening in a transition I believe this doesn’t actually work the way we think but the point is that we had to do a lot of this manually because form actions run as a transition if you remember an action by convention is a function that uses async transitions these updates for the state are considered low priority and so inside of our action we’re actually not able to update the UI in the same way that we had done before with an event handler because updating State both with whatever error we might be getting back and stuff like loading States is such a common use case react has given us a new hook and that new Hook is this use action state that we saw very briefly if you want to learn more about the use action State hook you can click the little Pi symbol down here in the bottom that will take you to the documentation for it or you can stick around with us because in the next Grim that’s what we’re going to be talking about we’ll be turning the common use cases that we see here and using the use action State hook in order to get this functionality back so that’s what’s coming up next let’s see how we can use the use action State hook to gain back some of the functionality that we want when it comes to maintaining State and loading errors and so forth inside of an async transition or an action the use action State hook gives us a way to track and change component State a pending status that automatically gets flipped for us back back and forth by react and gives us a wrapped action function that we can use in our form as the function that we pass to the action prop although the truth is these action functions don’t have to be used in forms there are other ways that you can use them as well we just so happen to be using them in a form as it’s going to be one of the most common use cases for actions so let’s see exactly what this looks like I’m going to get rid of these two State Creations that I had before and everywhere that I’m changing them in my code so that’s here and here we can just get rid of this finally all together and okay we’re back to where we were before let’s go ahead and pull in the use action State hook and at the top of my function I’m going to make a call to use action State and this is where the API for this hook differs a bit from what you might be used to with used State we know that we get a state value and we get a function to update that state with use action State we actually get three values back so I’m going to destructure the array that we get back the first item is going to be the state that we want to maintain inside of our component this is very similar to what we had before the second is going to be the action function and this action function we’re going to provide in just a minute over here but while I’m doing this I’m going to make sure I update my form action to be this new wrapped action function that gets returned by calling use action State and in the case of this hook there actually is a third value often times in the documentation this value is called is pending because we’re destructuring an array you could call this whatever you want I think just to distinguish it between the loading that I had before I’m going to stick with is pending this represents a Boolean value either true or false that will automatically update for us depending on the current status of the form if the form is submitted and things are happening in the background as part of the transition that react is performing then it will update is pending to be true and this gives us a chance to put that paragraph down in our return value where can indicate that things are loading or do a loading spinner or whatever it is you want to use okay that’s going to be great so in use action state I’m going to provide two values the first value will be a function we’ll fill this out in just a second and the second value is going to be my initial State this reminds me a lot of the array reduce function where we provided a function that allows us to alter the state and as a second parameter the initial state that it should start with the first time it runs in our case we do have some states that we care about in this component and that is our name State here so what I can do is just take the name State initial value that I gave it before and I’ll just paste it in right here let’s put these on their own lines so they’re a little bit more readable okay now what do we do about this function well this function is the action that we want to run when the form gets submitted or again whenever this action function gets run so I want you to think for a second is there anything that we already have in our component that we can use as the contents for this function well we already wrote Our form action function down here and so I can either just take the name of that and put it right here or if I really wanted to I could take the contents of this function and just stuff it right in here in the use action State I think I’m just going to leave this here because we already wrote it out because I’m going to be using use action state to maintain the state of my component I shouldn’t need this Ed State anymore so we’ll go ahead and and clean that up and currently the only thing I’m tracking is that name state so I could maybe just choose to call this name so that I don’t have to update everywhere else to say state so we’ll do that for now this will be changing very soon all right at this point we have bitten off quite a big chunk of new information and there is one more thing that we have to make sure we cover when it comes to use action State and that has to do with this form action function however because we’re trying to process a lot of information here we’re going to do that in the next lesson instead however before just pushing ahead if you feel confused at all about what’s going on here take the time to mess around with this code also don’t be afraid to go over to the use action State documentation and just try to read a bit more about it in fact the funny thing about these slides these links that you see will actually lead you to the what’s new in react 19 blog post and that’s because when I recorded this that blog post did represent the most updated API for these new hooks whereas the actual documentation has not yet yet been updated to show the brand new apis for them so the documentation is not currently correct as I’m recording this but that blog post is so those links do lead you to the blog post and hopefully you’ll get some helpful information there if you need to watch this again to help things sync in that is completely okay and in the next lesson we’ll tackle updating form action so that it will start working again the way that it was before but this time with a few extra benefits so once you’re ready we’ll move on to that if you’re familiar with the concept of reducers in Redux or use reducer in react you might already understand what we’re about to talk about the react team has chosen to make this action function that you pass as the first parameter to use action State work in a similar way to use reducer as things currently stand this is not yet going to work and that’s because this function doesn’t just take the form data as the parameter but it also will receive the previous state for our component as its first parameter and then the job of your form action function assuming you want this state value which we’re calling name in this case to be updated correctly the job of Your Action function is to return the new version of State whatever it should be before we were calling set name in this case we’re going to return the new name notice that we’re not making use of this preate value we’re going to in just a minute but by returning the new name that means that react will will take the return value from calling our form action function and it will automatically update this name value for us and rerender the components that anywhere we’re referring to name like down here will be correctly displayed to the user okay let’s see how we’re doing here let’s go ahead and change this back to my name Bob’s roll I hit enter it does still take a couple seconds and we don’t yet have those pending values but it updated correctly awesome okay now that we’re back in a working State let’s actually start improving the user experience here and we’re going to do this with the challenge if you’re already relatively experienced with react then this might not be much of a challenge for you but I want you to figure out how you can display a paragraph with this loading text of course this is more of a placeholder for a much better designed loading spinner of some sort but it should display this loading paragraph whenever the action that you’re running is still in the process of running I’m not going to get too much more detailed there because I think this is probably obvious enough and if it’s not that’s okay it’s a good time to play around with the code and look at the values that you have access to to see if you can figure it out and I guess let’s go ahead and just put the paragraph right here pause now and work on this challenge the key lies in this is pending value that we’re getting back as the third item in this destructured array that we’re getting back from ‘s action State the cool thing about is pending is react is already going to handle flipping it from false to true and true to false for us behind the scenes so I just already have free access to this is pending value we’ll go ahead and say if is pending is true then let’s go ahead and display this paragraph right here let’s clean up the challenge text hit save and test this out I’ll hit enter we get a loading value which is awesome that gives some kind of user feedback and then when it’s done the loading value goes away it flipped back to false and the update finished okay I want to do a bit of a sanity check here because we have covered a lot of ground we have gotten rid of all manual State creation that we had before we originally had the input which tracked every keystroke of our input we had the name that we were saving we also at one point created State for the loading State and the error State and we’ve since removed all of that instead of the input we’re letting the form track its own information just the way forms have always done in the past for the state that does affect how this component displays in this case just the name that’s showing up in this blue text use action State gives us access to a state that we can update inside of the function that we passed to it in this case called form action actually you know what now that I think about it form action and action function are confusing names for this lesson let’s go ahead and have this say something like update name this way this function can focus on doing the one thing it’s supposed to be doing which is to update the name and we’re not going to get bogged down in the term of action function or form action and other equally confusing names the state that we’re getting back from use action state is going to be determined by whatever we decide to return from our function in this case the update name function cently we’re only tracking the string name but in a second we’re going to do this and include an error State as well we’re also getting the is pending value just for free by using use action State this allows us to avoid having to track that state by ourselves and we’re able to determine what the initial state would be just like in used State we can say blah blah blah equals use State and then provide an initial value right here we can essentially mimic that same thing in use action state by providing this second parameter if you don’t care what the initial state is you can just put null here okay let’s finally tackle the error State and see how we can provide feedback to the user when there’s some kind of error when we’re trying to update the name in the database or communicate with our server whatever the error might be the way we currently have this written the state that we care about with our component we are tracking just in this name value it’s just a string however if you’ve ever used Redux and dealt with reducers in Redux or you’ve used use reducer or if you’ve ever just tracked your state using an object instead of simple primitive values like strings or booleans you might already be familiar with the idea of having your state that you’re tracking in your component be an object rather than a simple primitive value so instead of grabbing my initial State just from local storage and having it be a string let’s update this state so that it’s an object instead and actually I’m going to make this a challenge okay your challenge is to update the state that we’re getting back from use action state to be an object that will involve changing this initial State here and that object should have a name property instead of just being a bare primitive string value then I’d like you to change this from saying name to saying State and then update anywhere in your component that is currently referring to name to make it reference the correct thing so that things are still working exactly like they are now I’ll give you a little bit of a hint most of this is straightforward the one thing that might be tricky is right here on line 25 you’ll need to make sure you don’t forget to return the correct value of State inside of your update name function okay I think that’s enough information pause now and work on this challenge all right let’s do this one by one so instead of just having this be a bare value I’m going to wrap this in curly braces and give it a name property just like that that should be everything we need there then personally I think it makes more sense to call this state because it now represents the state of this component instead of just the bare name value down inside of my return I have here referencing name but now that’s going to be state. name and I guess that’s the only change that needs to happen there and then this one instead of returning the string value for new name I’m going to return an object with a name property just like that this is one of those refactors that’s not going to look like it really did much at all we’ll go ahead and put in a new username we get our loading State and cool our name has updated and everything still seems to be working okay Bob now why did we go through all that trouble well because we’re tracking an object we now can contain multiple pieces of State inside of this one state value whereas before we needed to track the error in its own separate error State like this using use State we now can track error information just inside the same state that we got back from use action State and again this is where if you’ve ever used used reducer or reducers in redex it’s going to feel pretty familiar let’s go ahead and add to our state an error value I’ll start it off as null in this initial State and because that’s getting kind of long let me put these on their own lines okay great well now we finally need to take this error message that we were catching inside of our catch block here and figure out a way to display that to the user and that’s actually going to be your next challenge okay your challenge is to take the error message that is just currently being logged to the console right now and move it out into the UI so that the user gets meaningful feedback as to what went wrong by the way if you had a chance to look at the code for this update name in database it’s really not doing anything with the database it’s just waiting for, 1500 milliseconds and then updating local storage with the name that was provided I do have this little case in here though that says if anywhere in that new name there’s the text error then it will throw an error so you can trigger the error by just typing in error that’s probably the easiest way and hitting enter now the trickiest part about this challenge is going to be using the previous states to make sure that you don’t get rid of the name property that used to be there it would be easy to just return an object that has an error property but doing so would eliminate the state. name and you would get some weird undefined values and then you’ll want to display the error message I put a little placeholder right here where you can do that and I think that’s all the information you need pause now and work on this challenge okay let me just get rid of the console. error cuz that’s not really very useful to our users and instead we’ll go ahead and return an object and that object should have an error property which will be the value of the error object that we’re catching in this catch block because of the way JavaScript works if I have the same property and variable name I can actually just get rid of one of them so I’ll just say error however if I don’t return the name property then this state variable here will no longer have a state. name and then we’ll have something like state. name being undefined and we just don’t want that to happen so I will make sure to include a name variable and I’ll just give it whatever the previous states name property or value was if you’ve used reducers or maintained State objects before you might be saying well can’t I just spread in all of the previous state and then overwrite the error and yes you can in fact this is the way that I prefer to write it however just for the sake of clarity I think it’s a little easier when you’re learning this to see it written out this way the last thing that I’m going to do and I actually didn’t mention this in the challenge text was I want to reset my error to something like null when the user is trying to update their name in the database again I don’t want that message to stick around from before I’m actually not 100% sure this is necessary let’s go ahead and test it out we’ll keep it this way for now down here where I’m displaying the error I’m going to say if state. error is truthy or it exists then I want to display a paragraph and I did previously come up with a class name for this uh that’s just called error and I’ll just stick in states. error. message there might be an issue here let’s clear out the challenge text and hit save let’s try to submit error we get loading and perfect awesome we get failed to update name the name did not update so that’s good we wouldn’t want this to say error as well as telling them that the name didn’t update correctly and uh just for curiosity sake let’s go ahead and take this out like we were saying and see what happens if first I get an error and then I try to update it to Bob okay well for the most part that seems to work just fine I think it’s maybe nice to be a bit more explicit and say we’re setting the error back to null but uh at this point we’re kind of splitting hairs now we’ve talked for a long time but in the end all we really did was add this error state to the state that we’re tracking from use action State and then update our UI and our logic a little bit the only other update I might choose to make here if you noticed if we had an error we get our error State that’s great but I’d kind of like to be able to click update and have that error disappear immediately right now if I click update it sticks around while it’s talking to the database I think the easiest way to fix that would just be to say as long as we’re not is pending and there is an error then display the error message this way if pending is true then that’s just going to disappear and I guess we can test this we’ll hit error so that we get our air state we’ll say Bob’s roll there we go okay the error message went away as soon as I submitted my form okay wow that was a lot of information on use action State however that does represent a huge new addition to react 19 so it warrants spending a bit of extra time so that we really understand what’s going on under the hood there are a couple new awesome hooks that were included with react 19 and those will fit naturally into exactly what we’re working on now so that’s what we’re going to do next by talking about use optimistic it’s really important as we’re developing our applications that we handle any potential error states that might happen however if we were to really look at the stats at how often errors occur versus how often our interactions with our server and our database just kind of work the way that they’re supposed to I’m sure that we would find that a vast majority of those interactions with the server work out just fine I guess if that’s not the case for your app then you have a couple other issues you might want to work out especially with your back developers one of the things that we can do is optimistically update our user interface when we submit something or make a mutation with the assumption that things are going to just work out and then if for some reason they don’t work out we revert it back to a previous state doing this makes a huge difference in the snappiness of your app it can feel like it’s truly happening natively and some of that loading State stuff can really just be removed so that the user feels like the app is immediately responding to their in puts for example if I’m here and I type a new username and hit update it would be ideal if the absolute instant that I click update it just updates up here and I don’t need to worry about it loading or thinking about the round trip that’s happening to the server as a regular user I just want it to update and that’s where the new use optimistic hook comes in use optimistic has an API that’s very similar to Ed State and it provides an optimistic state that can update to the user immediately and behind behind the scenes it will automatically be reverted if there is some kind of problem that happens in the background so let’s see the Syntax for use optimistic first I need to make sure that I pull it in from react so we’ll get use optimistic and right below my use action State we’ll go ahead and pull in the optimistic name and a set optimistic name again this is very similar to the API for use state but we’ll call use optimistic and then the key difference here is instead of giving it kind of an initial value like Anonymous user or whatever we’re going to pass to it the value that we’re trying to have it track between renders that will make a bit more sense to us in just a second by doing this we now have optimistic name which we can display immediately to the user instead of displaying state. name we’ll go ahead and display the optimistic name and then we also need to make use of set optimistic name and actually that’s going to be a challenge just to make sure you’re alert and awake and paying attention your challenge is to figure out where would you run the set optimistic name so that it will update immediately when the user submits the form in fact you should place it where you think it should be and then test out the code and see if ultimately if it’s working as soon as you hit update the name that’s displayed should immediately update and if you submit some kind of error like Bob error and hit update it will display Bob error briefly and then it will revert back to the name that it had before and display the error message time to get your hands on the keyboard pause now and work on this challenge well it’s this update name in DB function that is causing the delay that just is naturally happening as we’re speaking to our server so even before we do that I’m going to call set optimistic name and we’ll pass in the form data doget name like we’re doing down here so that it can just optimistically set the name immediately before this await update in DB happens and that should be all that I need to do this set optimistic is pretty powerful we’ll hit update I’ll change this to Bob and hit enter and look at that we have Bob immediately and we did see that loading while the update name in database was still happening but in the end loading went away and we already saw what was happening in fact it almost feels like we really don’t need that loading State anymore but let’s tackle that in a second first of all I’m going to submit an error I’ll hit enter we see error up here and then it reverts back to Bob and it gives us some user feedback that says that it failed to update the name this kind of optimistic update is something that you might not realize you’re using everywhere but it happens everywhere for example if you’re on Twitter and you hit the little like button or the heart you don’t want a little loading spinner to show up while it’s speaking to the database to see if it can correctly heart that tweet instead you just want it to fill in the heart immediately and do all the the other stuff behind the scenes a vast majority of the time it just works the way that it’s supposed to so we can give our users that Snappy experience by using this use optimistic hook and automatically by react get the ability to revert it back to what it was before if something does go wrong honestly because the is pending value was only there to display loading while the interaction with the server was happening and now we’re using an optimistic update I’m just going to get rid of that is pending value for now and let’s hit save and try this whole experience again and there we go now there was a bit of a lag there where we’re still seeing the text inside of our input I’m sure that there’s a way that we could update that but for now I think the point has come across that use optimistic is a really helpful tool whenever you want to add a bit more of a Snappy responsive feeling to your application there’s one more brand new hook that we’re going to tackle next which is called use form status so that’s what’s coming up another new hook we have in react 19 is a pretty straightforward one but can be really helpful if you ever find yourself building a component library that relies on forms and of course this Hook is called use form status the main idea of use form status is that when you have a form element there’s often a number of aspects with that form that can be really useful for your components to know about and it’s a fairly common task to build component libraries that have specially designed elements like a custom input or a custom button and commonly you’ll want those different elements to react to different states in your form like this is pending variable so first let’s go ahead and make a custom button this is just an example of course this could be as complex as you might want it to be and in this my button component we are just going to render a native button and we’ll just put in the children there and let me change button up here to my button now this is about as basic As It Gets but there’s a few things that we still need to do in order for this to be a drop in replacement for example if we have a type or any other prop like style or class name we would want to make sure to pass those on so we can do that with a spread operator we’ll just pull in the rest of the props and I’ll go ahead and just spread those directly onto the button like this and that way if I had other props like type submit or like a class name that was associated with this button those would just get passed down automatically however when it comes to different form States like the is pending variable if you wanted your my button component to react differently if is pending is true historically you’d either have to pass this down as a prop in this case that’s really not that big of a deal you could say is pending is equal to the value of is pending and then you would have to pull in is pending as a prop I won’t go too far down this hole cuz that’s not the way we’re going to do it or if this button were maybe multiple levels nested deeply into this form you might decide instead of drill buing those props multiple levels down you would have to create your own context well in order to help with this pretty common use case react released this use form status hook and it couldn’t be simpler to use the main thing that it does is it acts as a context consumer for the nearest parent form element so essentially react turns the form element into a context provider and use form status as a way to consume that context and it will automatically pass down information about the current status of that form for you this couldn’t be easier to use the only thing that is a bit different is we’re not going to import this from the react Library we’re going to import it from the react Dom Library so we’ll pull this in from react Dom I think the reason for this is because they’re turning the native form element into a context provider that’s something that needs to happen in the Dom and not just in the library of react so now that we have that imported inside of my button I can just consume that context let’s go ahead and just see what comes in I’ll call this object equals use form status and that consumes the context that’s passed down and then we’ll go ahead and conso log this object so we can get a chance to see what it’s all about we can see that it’s an object that has four properties pending data method and action let’s go ahead and submit this form and there we can temporarily see pending changed to True data was an instance of form data the method which is the request method for this form was a get method and that’s just because I didn’t specify on my form that it should be a post or anything like that and then the action is the action function in case we needed to run that action inside of our button for some reason I imagine of these properties the pending property and the data property are probably the most useful for example I might be able to just pull in the pending status from use form status and I don’t know maybe we want to say if pending is true then the button will display maybe submitting but otherwise it’ll display the regular children it might be a contrived example but let’s go ahead and see how that works and oh I need to not console log object anymore okay so let’s change this to something and I’ll hit enter we can see it says submitting while it’s submitting and then it changes back to update again this is pretty straightforward it’s really useful whenever you’re building any kind of custom form component that needs access to the information about the current state of the form this used form status hook does represent the last of the brand new hook from react 19 but it’s not the last of the features from react 19 so we still have a little bit of ground to cover as always play around with the code as much as you want and when you’re ready we’ll move on since we just created this custom button that we’re using inside of our form I thought it would also make sense to talk about an improvement to refs in react really what a ref is is a way to maintain State between renders without triggering a render normal state in react will maintain state or maintain information from one render to the next but anytime that state changes it will rerun your components or reender your components that way what gets displayed on the screen is a function of whatever your current state is and a ref will essentially do the same thing but it won’t cause that render often times a ref is used as a way to hold on to the reference to a Dom node if you ever need to imperatively interact with that Dom node a really common example is setting Focus inside of an input element but doing it with the native Dom JavaScript using Focus there’s a lot of other reasons you might want to hold on to the Dom node of something but if you are creating a custom component like my button here and you’re creating the ref in the parent component like we have in our form up here we need a way to pass that ref down to our custom component and we can do that with the dedicated ref prop and so we set ref equal to the ref that gets created up above I didn’t bother to create this ref using the used ref hook because that’s a little bit outside the scope of this lesson but in order for this to work we can’t simply pass it down as a prop in react 18 and earlier instead we had to use a built-in function called forward ref and this is something that was sort of meant to be a workaround for a temporary solution to this issue of forwarding refs and using forward ref would provide the ref as a second property or a second parameter to our component so this destructured object here represents props but there would be a second one called ref and that way I could pass that ref onto the button and just give it to it like that as I said this was meant to be a temporary workaround on the react team and so fortunately with react 19 we don’t have to do it this way anymore we can pass refs as a prop just as you might normally expect to do so this part would stay exactly the same where ref equals ref and then it would show up as one of the props so we have props do children and we would have props do ref and then all the rest that we pulled in so not a giant change but it is really nice to minimize the API of react when you can by getting rid of that forward ref function you don’t need to do that anymore and again this really only is something that you’ll do if you’re making custom components often times when you’re building a component library and you need to be able to give access to the ref on the native Dom element that you’re rendering in your component so nice and concise pretty simple straightforward using refs as a prop that’s one of the new features in react 19 one of the most exciting things that’s been added to react 19 has been talked about quite a bit over the last couple years it’s an API that they’ve been working on for quite some time and it’s called use now this is actually separate from what we were talking about with new hooks because use isn’t actually a hook in the documentation they simply call it a new API and now I know what you’re thinking the name is really conf confusing there’s a lot of debate about the name itself but try to keep in mind that it’s not actually a hook and therefore it doesn’t have to obey the rules of hooks one of the most prominent rules of hooks is that they cannot be used conditionally they have to be used at the top level of a component and you can’t put a hook call like use State inside of an if block which I personally haven’t run into too many issues with but I know that it is a bit of a headache or some use cases and what use does is it allows us to read some asynchronous resources and then it will automatically suspend the component this is using react suspense we’re going to see in just a second how we can Implement that and then kind of randomly use can also be used to consume context essentially like a dropin replacement for use context anytime you’ve had to pull in and consume the context from a context provider however because of Point number one you now can replace use context with use and you could conditionally pull in that context if you needed to now let’s work on point number two here where it can read async resources when react very first started talking about the upcoming release for version 19 a lot of people were talking about how you can take your fetch requests for example and pull them into your component and write your code as if it were synchronous I’m going to give a bit of a spoiler alert here we’re not able to do that with the actual react 19 as it currently stands at the time of this recording but I’ll show you what I’m talking about first and then we’ll see what the actual limitation is fetching resource inside of a component has always been a bit of a rigma rooll when it comes to doing it natively in react there are some really great and popular libraries like tanack query and S SWR that make this process quite a bit simpler but in vanilla pure react the way that we have typically had to do it is by using a use effect to run the fetch request when the component first mounts and then to save that information in state that would look something like this we’ll import use state and use effect from react and we’ll go ahead and set up our use effect and I’ll put a dependency array that’s empty so that it just runs the first time before we write the code there let’s go ahead and save this information in state we’ll call it Pokemon because we’re going to pull from the Pokemon API and set Pokemon and we’ll get that with State we’ll just initialize it as null and then inside of my use effect we will make our fetch request so I can call Fetch and I’ll just put in the URL that I already have copied we’ll tack on a do then and get the Json from it or rather parse the Json from it and then we will take that data and we will set the Pokemon to that data presuming you’ve done a bit of react this hopefully looks pretty familiar or at least makes quite a bit of sense just from seeing it I’m not going to worry too much about what I actually do with this data so I’m actually just going to run json. string ofy and we’ll stringify the Pokemon and I’m just going to do a little bit of formatting to it here okay great well that information comes in and it’s working but essentially what we’re having to do here is use an effect because this component we know is doing something asynchronous it’s going to render and we need it to have something that it can render and then it’s going to run an effect and we know that effect is going to take some time or that fetch request is going to take some time then when it finally comes back it’s going to set the data in state so that it reenders the component now with a Pokemon object the way that we would expect and displays it down here below we really have to be thinking a lot about the asynchronous nature of these components and understand the rendering cycle and how everything’s working under the hood use let’s go ahead and just pull it in right now use is intended to make this process a lot simpler in react 18 they introduce the idea of suspending a component and that allows us to create a declarative boundary or a suspense boundary around the component that we’re rendering and give it a fallback or a loading UI of some sort that when the inner component suspends the suspense boundary will display on the screen while things are still happening under the hood first let’s make use of use and see how that benefits our code and then we’ll need to make use of the suspense boundary right after that use is really nice I don’t need a use effect anymore so I just have my Fetch and I won’t need to save this information in state so I have my fetch here let’s go ahead and save the promise that comes back from Fetch as let’s say fetch promise just have to spell it right here there we go if you weren’t familiar fetch returns a promise and all the then chains also return a promise and I don’t know that it’s okay for me to make a component that starts with a weight like this so I can’t just await the response from that fetch but I have this fetch promise and I can call use from react and get the data what looks like synchronously so I’ll say Pokรฉmon equals use and then I will pass in my promise that I want to wait for it to resolve before I display anything and actually I can get rid of this do then because we’re not doing set Pokemon anymore already this is so much easier to understand I can write my code as if everything were going to happen synchronously and I can more declaratively use a suspense boundary to suspend everything first of all let’s go ahead and well let’s just see what happens okay so I get an error it says that async a weight is not yet supported in client components and honestly this is a bit cryptic essentially what’s happening is my component with use has suspended but I’m not catching that with a suspense boundary in anyway so let’s do that we’ll go ahead and pull in the suspense component from react and this is the only place we’re rendering things so I’m just going to wrap this in the suspense boundary like this okay and then I can provide a a fall back prop to suspense we’ll just set it equal to a paragraph that says loading of course this is where you’d want to put some kind of skeleton UI or maybe a loading spinner or something like that okay let’s see what happens I’m going to hit save and look at that we get our data back in however we do get a warning from react the warning says a component was suspended by an uncashed promise creating promises inside the client component or hook is not yet supported except via a suspense comp library or framework and yes this leads us to the main limitation that we currently have with use and that is if we create a new promise inside of the code of our component then the problem is every single time this component renders it’s going to create another promise it’s going to make another fetch request and so we either need to create a mechanism that will cach this promise and make sure that it doesn’t perform another fetch request when the component renders or like it says we need to use a suspense compatible library or framework that will do that work for us in fact we can go see that note directly here in the documentation and it just well gives you the exact same warning that we just saw there is a way around this where we can create our own cached promises however that is a bit outside the scope of this lesson I think that use shows pun intended great promise for the future especially when react Implement something that makes caching of promises a lot easier like they say down here in the future we plan to ship features to make it easier to Cache promises inside of render and by the way inside of render just means inside the body of your component in fact if you wanted to play with this code this would be a good time to do that you can see how this fetch request is happening again and again every time this component rerenders and you could just create a simple Boolean state or a counter state or something and a button that when you click it it flips that or increments or whatever anything to change the state of this component you’ll see that this loading state right here this fallback loading State happens again and again and again every single time the state changes because it’s making another fetch request in fact I’m pretty sure you could go to your network Tab and see that happening as well at this point that’s about as far as I’m going to go into the new use function that we have access to hopefully in the future we’ll find that it’s much more I guess you could say useful for us and with that under our belts that really does represent the majority of what I wanted to talk about in this course however there are a number of miscellaneous improvements that don’t necessarily require me to give you code examples but that I think would be important to go over so we’re really rounding the end of this mini course but I want to make sure I touch on these miscellaneous improvements that are coming with react as well besides just all the new stuff that came with react 19 there’s a bunch of miscellaneous improvements that they made to the react itself and I’m not going to go into every single one of these because honestly you can just go to see the blog it’ll show you exactly in detail every single thing I am going to focus on the the ones that I think are easy to demonstrate especially here in the scrimba environment and the first one I wanted to show off which I think is really cool is the new support for document metadata I’m realizing now that title sounds pretty boring but it’s actually pretty useful we can see an example over here I just have an app that’s rendering this blog post component it’s passing in a post which just has information about the post it might have a title I probably should have a body of some kind in here but this is just a sample anyway and in this case it has this keywords prop which is a comma separated string this is pretty much directly from this blog post here and the blog post component is taking that post object as props and it’s rendering an article and displaying everything that you might want a blog post normally to display however one really common thing especially when you’re talking about blogs is you might want to update the title tag of your HTML document to reflect the title of the post that you’re at this is really common you’ll see it in the tabs at the top of your browser when you go to a new blog post it might update what that title is It’s not just a user experience thing it’s actually a really big SEO benefit to have the title tag reflect the content on the page however when we’re here inside of react typically we are interacting with the body everything that we render inside of react is going to get stuffed inside of this div with the idea of root and of course that lives in the body and we don’t have direct access to the head of the document at least until now anytime you render a meta tag a title tag or a link tag react will take the content there and it will hoist it up to the head of your document thus making it a lot easier to modify those tags without using a third party Library the most popular of which I believe is react helmet the blog post does mention that there might still be instances where you want to use a thirdparty library like that but for simple things like this it’s really nice for us to be able to just render the title element and have react hoist that up to the head for us now before I started recording I took a screenshot of the dev tools that shows that in fact my awesome blog post is the new value for the title tag and it’s right here inside of the head of the component as opposed to being inside the body and you can see the other meta tags and here’s the content with test one and test two all of which is being hoisted up to the head and that’s pretty much it for support for document metadata it’s pretty straightforward and that does it for this mini course on what’s new in react 19 now as I mentioned before we haven’t covered everything there are a bunch of other additional miscellaneous improvements that have been made to react in react 19 you can click the screenshot here to go to that blog post which at the time of recording does represent the most updated API that you can find with these new features as you might have noticed a lot of these new features don’t necessarily affect the core way that react works and I do have an introductory course on react here on scrimba that I’m just about to start re-recording from scratch so I’m excited to jump into that however these updates to react 19 actually affect more of the intermediate or Advanced side of react and if any of this felt a little bit over your head or you just want a chance to dive a little bit deeper into react you can check out my Advanced react course here on scrimba my name is Bob zeroll it’s been a pleasure to work through this react 19 information with you if you want to follow me on X that’s the place that I tend to be most active these days online and with that I’m going to set you loose into this new bright world of react 19 happy Cod thing

This Post Has 25 Comments

  1. @emteiks

    going from controlled to uncontrolled inputs is such a bliss… i hope soon React will not be needed because developers would finally properly learn html, DOM and JS ๐Ÿ˜€

  2. @MittuRohith

    at 28:10 how setName(newName) is calledit is not declare right but yet still gives correct output. can any one explain

  3. @codyelhard5779

    "React relay" is ahead of it's time and already solves a lot of the data fetching problems (built by facebook). However, love the "native" support for brand new react projects ๐Ÿš€

  4. Thank you so much this was very educational. And appreciate the time you put in making this.

  5. @hwapyongedouard

    bob the best teacher, hope he will make a 11h+ course of react 19 on scrimba โ™ฅโ™ฅ

  6. @r-i-ch

    What about clearing the form after submitting?

  7. @mahbleh404


  8. @emmang2010

    Has this been released? I still see version 18.x on React official site.

  9. @codewithkin

    Let's goo ๐ŸŽ‰๐ŸŽ‰๐ŸŽ‰. This is awesome

  10. @wumpini


  11. @slimiissa195

    l'm first,๐Ÿ‡ฉ๐Ÿ‡ฟ๐Ÿ‡ฉ๐Ÿ‡ฟ๐Ÿ‡ฉ๐Ÿ‡ฟ

Leave a Reply