React Unpacked: A Roadmap to React 19 | Sam Selikoff

[Music] all right so uh my name is Sam sakov and this is my first react comp actually it's been awesome so far and my talk is called react unpacked um a road map to

react 19 but as you just saw there's a ton of features in react 19 and since um I only have 20 minutes really today to play we are going to basically focus on actions and um also because I'm the last talk before lunch here I figured it would be more fun to just do some live coding so uh we're going to take a look basically at what uh Andrew was talking

about this morning and see how some of these new action apis work um so this should be fun uh let's see here okay so is that big enough let's see maybe one more little more space okay so this is the demo that we are looking at pretty simple app right here on the right um we have a little debug toolbar down here with kind of the server side state so we have um a value for how much stock the T-shirt has we have a description right

here and um I can expand some details for the shirt and if I go ahead and refresh I reset the cart down to zero I can click add to cart we see some pending UI right here and then we get a refresh and uh I can refresh this down here and if we make this down to zero and I click add to cart we get a refresh and we see an because we can't add

anything else to the cart so um pretty simple UI and right now this is built all with client side you know typical react 18 apis nothing fancy going on here um I have a little used query hook it's probably similar to you know data fetching hooks you all have used it gives us the data right here if we don't have it we render an initial spinner on load and um then we show the details we have a little form right here and then we have a a a submit

Handler right here so handle add to cart just a little event handler it's going to prevent default it set some pending state to true that's what renders this spinner and uh it makes an API request here to add to cart so these are just hitting uh API routes same with this one right here and once that comes back if the Json is okay we go ahead and call revalidate that's bound to our query so that's why this C updates uh when we click this

and if it's not if there was an error we set some react State called error and uh that's what shows this once we're down to zero we hit add to cart and uh we see our little a here so told me about uh pretty standard stuff we've probably all written a lot of react code that looks like this and I want to talk about some of the things in react 19 that address some of the issues with this code so um there are some issues with this code uh what do you think I should do to to highlight to reveal those issues

any ideas what should I do to make break my app how how would you break my app that's just probably pressing the button a couple times that's usually how you break most react apps right okay that's that's um that's pretty strange let's look at that again I'm going to go ahead and refresh I'm going to add two stocks uh two items to the stock right here and uh let's press it twice one two okay so it goes from six and then the pending indicator goes away and then