React Server Components: Form Actions + Server Actions

Yeah. Also, I don't necessarily know how capture cards work. I I had no idea you would have done anything, like, affecting color, but I guess that's why you do not go with the cheapos.

you gotta handle that. So it would

and you call that action from within your new optimistic action, You can it's just a it's just a function. Like, actions are just functions,

even without getting I've done that myself, React Miami and then potentially

a cache and a cache clearing, and what that will allow you to do is the method, which I I can't figure out why you would you need that in action as well.

AVerMedia directly to the client.

instead of taking your your existing server action and piping it directly into a form input,

remove it from the UI or it would give an error message. There's various ways to handle that. But, basically, the optimistic part of this whole thing is that you're handling your UI as if your server calls optimistically

works with your actions that you already have, and the way that it works is it takes in 2 things. It takes in 1, your state.

So use optimistic

So we're seeing change handler Yeah. I actually hooked this up with, or it can be some server side code that happens when somebody submits the form, and they huge benefit here is that it allows you to call and give you if you're not familiar with it, is a JavaScript API

It's like cheating to feel faster. It's a a great technique. Yeah.

items sports,

you're still populating that to do into your UI

your action in use optimistic hook, and then that will allow you to add your custom logic in there and to figure out if its parent form, whatever it is,

I need to refetch and just sort of, like, re fetches all of the data on that page. I think that's right. Is that right, Scott? will progressively but the most likely are going to be called in these 3 areas. 1, on a form submit. You pass like, on on the Svelte SvelteKit site for syntax, we have all kinds of buttons in the admin area where you just click on the button, and it runs some code server side Yeah. I'm going to sick pick the

the the server action doesn't come with the current page that you're on, so it's kinda hard to do that type of thing. However, the new they have, like, this unstable cache API, which is much better.

to a different camera and then back to the Cam Link to get it to work for whatever reason.

or o what's it called? Mac OS Mac OS. Yeah. Yeah. I would have to, like, change

And, also, like, the other thing is, like, whenever I would open up my photo booth on Mac OS X

Yeah. You know, there's you could do it different ways. Like, you could push into air this little miniature air pump. It's tiny.

Work. Cool. Well, I I like this. You know, I I have 1 cam link 4 k and 1 cam link that's, like, a 1000000000 years old. So maybe I should upgrade my non four k one to, something that does 4 k as well considering

the cam link 4 k hook that points to a URL an action, whether it's a server action, whether it's a client action, and you shouldn't have. What's more likely is you're gonna have, like, a, like, a lib folder with all of your functions inside of that. And every single file inside of there, you're just gonna put use server at the top of the file. Mhmm. And that marks that whole is a pain in the butt because it is USB a, and it's like a dongle. So if you're plugging a heavy HDMI into the Cam Link 4 k, and then you're trying to plug that into

this sort of world where we're talking about actions, whether that, you know, is the the Remix flavor of it, Yeah.

immediately

This is a, And because actions are asynchronous, your your actual state is a list of 5 messages, And how do you tell of is this action currently running? and your database logic You know? Like, what does that Mhmm. Look like And Slack will render it out as if it was sent, but they will also provide a little bit of UI being, like, like, it's not actually sent. Like, it looks like it's sent for you, but maybe it's great text. Yeah. Maybe there's a little spinner beside and it's going to return to you information of if a form is being submitted or not, hook we have here is called the use optimistic.

How are you gonna do that with, kids in car seats? Well, that's not going to work very Wes. So we got these inflatable car seats, Wes. They're good. They're like booster chairs. Our kids are old enough for booster chairs, so they're not like the car seat that you put a 2 year old in. Yeah. Yep. Yeah. I'm calling it a car seat, but it's a booster seat because our kids have graduated to those. But you have an inflatable booster seat. How you gonna blow this thing up? Well, Courtney got these little miniature

instantly.

and, therefore, I'm going to update the UI I just remember, like, you'd be, like, pumping it by hand. We'd be you know? But, yeah, this tiny little pump is is really pretty amazing. We gave it a try last night for the 1st time and really stoked about it. So, check it out. It's a tiny portable ultra mini air pump.

It's this little Tolinski

you're sort of wrapping it in you're wrapping both your state and your

Usually, what people are doing is just throwing the entire trying to replicate what it looks like

That was something that Apollo did really well. Yes. For GraphQL. They had nice docs for optimistic

are going through.

some frame rate go from that 5 to 6 and you hit enter, you immediately built on forms and form data,

camera size. So yeah.

motor technology

And in a situation where that would then fail,

is any patterns for

No. Thanks so much, Wes. I thought this was really, really super great. Yeah. I I look forward to giving all this stuff a rip.

flavor of it is the right direction for me. This is the direction that

most likely what you're gonna do is somebody's gonna submit a form that either creates a new item, updates an item, or deletes an item, and you're going to want to say, alright. Well, I saved it.

and your optimistic state is a list of 6 messages.

I don't know, probably

there's there's I think there's light, but the color is awful. Yeah. Yeah. Like, I didn't think that

the Svelte flavor of it, or now the React Vercel components or React

items Alright. Peace.

successful. Right? So let's say

just grabbing a whole new array of data. I think grabbing a whole new array of data is fine. But, yeah, we're just doing we're just invalidating

I have been waiting for. And React for, I think, for a long time, it's kind of been on the we're making things hard for you kind of position for a lot of this, especially in regards to form handling and things like that. So for me, this is a step in the right direction for React. It's making something easier for me. Yeah. That's that's where I wanna be in React land. I want it I want it to get easier because hey. We we have powerful tools. Now let's make these powerful tools,

a little bit of and and can relay the status and the pending

and then it also takes in your your action that needs to be submitted by pending, action the data that is on that page. In in in SvelteKit, we we have this as Wes, and and I think the SvelteKit approach is just because of the whole SQL statements inside of this function.

30 hours straight. I also tested a bunch of the Amazon, like, knock off ones just because, like, I had Node lying around because it's, like, $20

fans and pumps And when you submit the form, your action will receive a form data object, and you can use it however you wish. You can also programmatically And then that way you can show a spinner or something like that. What I have not found

probably into your UI, like a typical to do list. Right? It would pop up and and,

understands Yeah. That that's a great question. And and then you go ahead and submit your your action. And that optimistic state Let's get into sick picks. What do you got for me today?

thinking that or the server, you know, these lines are getting blurred, and your tools really need to get blurred as well. And that's why we use something called a Sentry, which is what the show is presented by, to track all of our data and how it works inside of our app. We look for slow queries. We look for slow routes. We look for slow form events and those types of things. And we're able to track at any given point

4 k, which JS, I think, the same as the cam link as well. Plug and play. It's been working great.

but Yeah. It's kind of a tricky,

that there is an action being submitted inside of it.

little air pump. What a Wes what a wild world.

a method for optimistically you

or that specific data

it from an HDMI stream to Mhmm. Whatever a webcam is looking for. So it it literally has to do something there's chips in them. That's why they're expensive. Right? It's not just a a converter where wires get connected to wires. So I was I was impressed that once somebody you can wire up a button that says save user,

From that action, you get 2 things. You get your state with any optimistic state added to it, and in order to

situation I

optimistically

proxy through your optimistic state.

showing how to, like, roll it back.

like, then you have to plug it ESLint, like I don't have USB on my MacBook, so you Scott have a converter or you plug it into a GitHub. And then the Cam Link 4 k doesn't work with Thunderbolt 4 hubs, it's been awesome. It's 60 frames a second on the answer to that is is maybe. I like, I I don't know if they will, but you can use the use form status

there's very few examples out there of people using this already.

and then you can then invalidate success messages. It could be, some error validation that needs to be displayed to the user.

it has a built in battery, so you charge it up and it can blow up an air mattress and all kinds of stuff. But specifically for us, we're gonna be using it if we're renting a car or maybe we're even taking a taxi or something.

if you have a list of 7 items on a page and one of your actions is to update or delete one of those items or to add a new one, you always get into this weird situation the kind of interesting thing is that a lot of the stuff that we're talking about it, server render components, Yes. That's a great explanation of that type of thing. And I love when apps have, like, an optimistic UI because

you don't have to, like, sit there and wait whether it's a form action,

over well, we're headed to Amsterdam, and we're going to Florence and stuff because I'm I'm speaking over there. And so we're doing a little bit of a a 2 week vacation to bounce around Europe for a little bit. And

the way that on submit or action equals partially because of of some comments I put on the GitHub, partially because of they talked to Ryan Florence from,

with the success state. So

it wouldn't necessarily even look like it was clicked. And you might click it again. That causes a whole host of issues. So, yeah, optimistic UI, it it really helps your applications.

have gotten yeah. And batteries as well. It's just, like, being able to pack for how how this should work. So what is a server?

UX thing in general because of what you do. You pop it out of the ESLint. You resubmit. Like, there are UX considerations there that I think are a little bit more,

your users might try to click it again. That might think your app is broken. Your app is gonna feel slow. On a bad network, that's going to take even longer, and it's going to feel bad.

I feel like

little air pump. And I have, like, a a portable air pump that's about this big that's USB powered. But this thing is literally, like, this big. And, And it's just a little $23

or I was surprised that the the knockoff one looks so terrible.

friendlier tools.

this thing is going to succeed, the list of items that are on that specific page, and that API is is pretty slick. Yeah. Yeah. And it it's you're right. That's 90% of the time what you're gonna maybe 99% of the time what you're gonna be doing here. So

So your state might be if if we're talking about a chat application, it might be an array of message that have been sent. So it takes in your existing state of the messages,

that would come back from the server, and but then throwing an extra flag variable on there being like, this is pending or this is optimistic.

Yeah. We are headed to

it's sent. Right? 99.999% Next. Js has this idea of it's not even just Vercel. A lot of this is client side stuff as Wes. And we're gonna Scott of dig into it, explain how it works, a lot of the use cases and whatnot, so buckle on up. How you doing today, Scott? a PHP without any sort of APIs. And and that's the massive benefit to me is that because only. It pairs really well with working with caches.

okay. Well, that now is done.

Yeah. I guess because it needs to change

you are you you have, like, a to do list. You submit that to do list

So that is action. Everything we've touched upon so far is React

cool. Well, that that was super informative. You Node? I think Yeah. So Optimistic UI is you know, the word optimistic here comes from the fact that you are

database storage of that to do was successful,

in an ideal

the server

Therefore, the UI feels very snappy.

compression works.

this server side action that you're doing will be

a good USB c cable.

We need to be able to quickly inflate these booster seats, deflate them, whatever.

the page

one thing, when you have kids, you have car seats.

Drizzle for the database, form actions, server actions, whenever likely Wes a form is submitted. Right? Like, the use server in quotes, and that marks that function as a server only function, And that will make sure that So who The name.

a proper error message with whatever you want to say, and your forms become super reusable because you

shout out Alex Alex dot j s on Twitter. He's the creator of t r p c. He's doing a ton What this will allow you to do is you can say action equals curly bracket, and you pass it send some metadata Drizzle Node Mhmm. And it was beautiful because Using actions. Here's my next point. Actions can be called anywhere, framework land. So let's talk about it. Actions.

because

JS all you have to do is make sure your your server returns

like, what are the patterns gonna start to look like Wes if you wanna make a reusable Now what I want to tell the client to do is refetch That like, a RPC, which means in an action, you can do that

you know, one of the things that working with forms, bad UX,

I created my schema in

if error, check for error message, just display the error. I do this all the time in in Svelte form action. So, you know, I I think this is

can have a

Form error messages validation.

a big win for a lot of, like, easy accessibility.

to get that right

and maybe the form isn't responding the correct way. This makes it so easy React Vercel components in general.

validation

You Node, something went wrong in the server process returned,

people don't get right all the time.

as an introduction

in React server and components. So form actions, server actions

actions Yes. I'm server only. Mhmm. And if you put a function in that file, so you have a server component file, you put a function in there, It will also be run on the client side. So you have to mark client components with use client, Actions allow you to sort of put that all together into a single function. And then the second It depends. And you can you can implement it yourself as well with with Vite, live streamer couple years because you're you're starting to see So actions, they're often tied to a form submit, but they do not have to be.

the this idea of actions in in React server components.

Welcome to syntax, folks. Today, we have another episode for you on React Vercel components. So we did episode 718 So there's just, like, little gremlins with the Cam Link that I was I was having. Not enough to be too much of an issue, but

So any number of things you wanna do while something is, That's the first one, form submit. The second 1 is you might wanna call it programmatically, can take in any data that you want. So most of the time, if you hook up an action to a form element,

call server code or run code on the client without having to do a whole bunch of extra work is honestly a game changer. I'm a big fan of They're not called form actions. They are called when it was pending as as part of a build step instead of actually being on the server, which is kind of interesting.

why do you have an API that so tightly,

they can run either client side or server side. So these are not just if this is not entirely for sending data to the server and getting stuff back, it can just run entirely client side, which is a very common use case Wes, alright, I have this form or I have this UI. And is much nicer. I did find myself leaning a lot more on just like HTML and you get a method for adding new optimistic messages. So the idea here is that use optimistic is going to proxy this will generally work is that you take your your existing action anywhere. Okay. Meaning Client side server side, but also Sometimes your actions are going to be server only, meaning that they have the database logic inside of them. And sometimes your actions are going to be is currently being submitted via the pending state. It also gives you and it works really well. I've been I ran it for, This did not fix that. It was it's a Chrome issue at the end of the day, but I decided to keep this because and you're looking at buying it, the Cam Link 4 k has been out for, like, 8 years and hasn't been updated. This thing is this this thing is awesome. Good. Really affordable,

Mongo commands typically goes to the server, gets loaded in the database, and then that gets populated don't know that much

Wes so, you know, not coupled to your to your UI? Is that ever going to be a thing you'll actually need? is a client side scripting language as well because

a GraphQL API, a REST API, you know, like, all of the the overhead of of that type of thing. So it's a a massive productivity

state, which is your data, your submit handler logic, like, what happens when somebody clicks a button or submits a form, about like, it was kinda funky. Like, I was, like, learning it, and I was like, this

Yeah. And and that was even the 1st time I saw anything like that was in Remix, you know, that server process can take some time. There's a round trip there, and users are you know, when they click something and it doesn't happen instantly,

server side code

Personally, I've I've built a couple things with them already. I have a couple sites in production with the use action state. So the initial state I don't know, a little bit more deep than just, hey, do it for me. You know? Exactly. I think that's why it doesn't do any of that. Yeah. I'd assume so. Because you have to put that own logic in in your action. So,

when you submit a form and you want to run some code.

Totally.

API, rollbacks.

have a user type into a form input, click that button, and you can bind that button to a function that runs on your server side. That function has database logic validation, This was previously in in today, if you go to the React docs, has improved in the last an actual action, you can, like I said, pass them to a form's action attribute.

from the client Vercel actions to form actions is

from the client in Meteor. So for me, like, our PC doing another one. We're gonna see if I can make it out to

when somebody does something, I need to run a function that will generate some state. So I see, like, 2 huge benefits.

feels very great, and I know that some people feel skeptical because they they have been working in a a different flow for so long. But there's definitely a lot of just generally nice things that can come about, especially if your client and server are a little bit more, like, I wanna say tightly coupled. You know? For a little while, we swung into this world where everybody's blog had its own API. And, like, hey. If there's not, like, multiple things consuming your is a big part of these things. Most websites, what they do, they load data.

into, like, a use effect or or using a third party library.

your logic, your state, your pending

and I I I remember trying those types of things and just being like, yes. This is what I've wanted. You know? Yeah. I I'm used to calling

But we're gonna start peeled back a little bit from forms, actions, and server actions, and we're just gonna call them actions. Right? But, generally, yeah, you're going to reach for a a framework that implements the whole server thing for you, whether that is Remix. We're gonna start seeing stuff from them pretty soon on their React server components.

the client is is such a benefit. I feel like I can just prototype stuff so much faster in React, and, of course, like, all of the other meta frameworks have this idea as well as just, This is going to be replacing a lot of your either inside of the action itself, when it fails? optimistically add that new state to it as well as you could you could throw a flag in there called pending or something like that if you wanna show that it is currently pending, things like that. Right? And if that promise is currently with this? And you don't need a form library, but he's he's sort of, like, looking the way that you mark

using them. I see, like, sort of 2 huge benefits to this type of thing. JS first, and you have to mark server

hooks. So the first Node is the use action state hook.

First, is is absolutely beautiful. So Because actions are functions that can be run it it either does something on the client side or it goes to the server side, and it's gonna return to you

item blah blah blah saved.

call it, it was 2 separate hooks.

Mhmm. And that has changed Alright. That's it for today. Anything else? Then you have the bound action itself

is the first argument, an action to the again,

You pass it your action, you're back to a spot where your optimistic state and your actual state are the exact same thing. So there's only ever The color on it is

it's going to say use form state.

the state of the action,

It might be previous form state or initial state.

But if you want a little bit more control, you're going to use 1 or or all of the following

currently pending. So it gives you a nice Boolean, and then you can use that Boolean anywhere in your page client side, like put it in an event handler, give your inputs names and attributes.

and this could be a few things. So

didn't work, you wanna do it again, you can get the the data from the previous submit.

Yeah. And that's really great because the alternative for that is you create your own state variable.

saying, like, saving blah blah blah blah. Mhmm. And then when when the data came back because, like, motors and about like, for example, if you are listening to this podcast and you reach every 15 seconds, there's a progress event that gets fired by the audio element. Right? You might want to send that data to the server Node, or you might want to log that data to local storage so that if somebody wants to reinstate it, you can save that data. It pretty much the whole crud so that you would you would pass that action to the the form or the button click or the programmatic and they can be remote procedural call. Being able to call server side code from

in the the first argument that I talked about, then I would update that Toast message to say, seems odd Yeah. So that wherever I go, I just sort of have it, and it. Maybe nothing. You know? Maybe they just show it, and if there is sometimes you don't your whole form is not a client component. It's maybe it's just a server component, but it's, it was a really nice flow to be able to do that type of thing. And I'll,

Or initial state is if you wanna prepopulate some of the inputs in a a bit bizarre, but they're have luggage that you can suck the air out of the luggage so it compresses more, and that's you can now do that because you can put a you can put a tiny little pump inside of luggage, or you're seeing these tiny little blowers And the way that that works is you can tag your caches with a bunch of different tags. Like, you could say, like, that you've had, which I was just saying, and And for a lot of people, they're always like, oh, that's stupid. It's a kind of a a funny way to do it because So if you are trying to read like, you you filled out a form, some data. Right? And that could be by default, Sometimes, some examples of what you might want to use an action for JS, at the very basic, you want to have somebody click a button and increment a number by 1. Right? Like, that's the the very that's the hello world of Mhmm. State management is incrementing.

event handler. And then the third one is, most importantly, the pending state. So this is going to be a Boolean that would matter. You know? But I don't know how how video It it depends.

reacted to it.

Remix Next, let's talk about actions themselves and and their their input. So just like a function, Often, you are cobbling together And if you want to do something that is where especially with pagination where a decent sized battery life in them. So, like, the the motors are getting more efficient, the batteries are getting better, and you're starting to see all these really interesting new products.

then you probably wanna do things like disable pass other data to it if you want as well. If you're not using it with a form, you're just using it programmatically.

once you call an action, Works really well. That's awesome. You adding on to that state. So

because one of them had to go inside of a form, and one of them has to go above the form. And it's just like Wow. Yeah. That doesn't make any sense to me. So I, like, I I wrote some comments on GitHub, and the React team a whole bunch of other sort of projects that are are working on this right now. One of them, which I'm really excited to see, is the tan stack stuff. So he's he's been, like, chewing on this for so you can't plug it into the hub. So I I did a little bit of research, and this is the one that a lot of people are recommending. It's cheaper than the Cam Tolinski 4 k. It's a Bos, of the time, that message is going to be sent. Right? anything that you would normally do on a server without having to do

they you can await inside of them. Likely, you're going to be doing something like await database Scott save. Mhmm. You might be fetching an external API,

you're going to get a form data object. A form data object is, Wes in order to get the status of Next. Js, obviously, is first to the party there, but there's They are often you're gonna hear the word form action, and you're gonna hear the word server action thrown around.

pass that data into your your database saves or whatever it is that you're gonna do.

you can take an entire form with all of its inputs and and all of the data that the user has taken in. You can convert that entire form to a a beautiful object and have all of the the data that you want. What this will do is you have access to that whole object, and you can then I don't know what page I'm on. When I'm writing a component, if you don't have something if like, is it pending or not? Like, is it currently being sent to the server and coming back? In order to get that data and you can use them with the hooks to to get some of this additional functionality.

tied to this or whatever that error was. I hated that one. You just pop a form on the page, in an event handler. Right? So you use something like downshift

So for many cases, you no longer have to use Scott, form handlers on change, on input,

what is the server component there in a vanilla React

Alright, Wes. Form actions.

of a Yeah. Vanilla React site if you're not using something like this? What is the server? Yeah. The server can be anything. It can be a server that is running React on the server. It can be a build step. So, like, React server components don't necessarily need a server.

vanilla React JS well as all the the the frameworks that are out there. So And a a question with that, though, Wes. Yeah. When you say vanilla React in this regard,

And many times when you're interacting with the site, you're sending data back to the server, then data comes from the server back to the ESLint. And that whole process is something

app in 2024?

syntax.fmforward/718

if you wanna learn more about a failure, then they'll show some sort of UI to you. But Or maybe it tries again. Wes. Yeah. Yeah. Yeah. Yeah. Retry as well. Yeah. We do this in my habit tracker because that was a whole thing. You'd click it, and on a network conditions that weren't great,

probably a Yarn now. I talked to him about, Reactathon last year,

But,

So

I get the general vibe. And in fact, go back and listen to episode number 718. That's,

very excited about this, and I should say that everything we are talking about today is a 100% And they changed the API to use action state, which is much better in my opinion. I'm really excited about this. So to React server components, and now we're going to do another one specifically on

They can be prerendered fall back. What's the word for that type thing? Or progressive enhanced, meaning that if you turn JavaScript off, they still will work Yeah. Because they they have been bound to that.

the component as in, like, a

It's not a Next JS stuff. There's one little thing I'm gonna talk about at the very end in regards to caching and invalidating data that is in Next. Js specific, but everything we're talking about today is just but even if it's 2, 300 milliseconds. Like, a good example is if you just have a to do list or or a chat app, right, in in Slack. As soon as I hit enter in Slack, to to create a a combo Bos, and you type something. And when somebody hits enter on an item in the combo box, you might wanna programmatically Next hook we have here is use form status.

you do a 100 times. You know? If if you're building anything, you do that a lot Yeah. Especially if it's interactive.

how they make my life easier.

about it, and he's just like, not totally sure. And it it seems like he's he's really has some ideas

I'm interested to hear exactly how an array instead of

React.

about React Vercel components beyond what we've talked about.

React component, but, like, what is the server

that transmission,

if something went wrong in that process regardless if it was happening on the server or the client or that kind of fuzzy

right about to head out to Miami tomorrow, Westside. I don't know when you're heading out, but my family's heading out there, and we're bringing the whole crew along. So, hey, I'm stoked. We've never been. I'm sure the kids are gonna have a blast going to museums and whatever they're gonna be off doing. But you and I are gonna be at React Miami, which by the time you're hearing this JS long and gone, but pretty stoked to be out there. So, yeah, excited.

up and get 2 months for free.

whether that is via the UI

area in between that now exists given how these tools work. So if you want error handling, exception handling,

Yeah. It's been been a while since I've been to a conference probably if you do not put a used client in that file,

all kinds of,

I'm doing,

JS nation.

and it, like, seems like everyone JS really stoked about this one as well. Wes seems like a really fun one, so I can't wait. It's a somewhat busy conference season for me this year. I'm doing cap 4 k.

So I'm Oh, yeah. Gonna see if I can do that or not. But yeah. And in

instant replay bug finding tools, Head on over to century.ioforward/syntax you know, working with data

Utah. There's 1 in a parks

November, we are going to be in New York City doing, another live syntax as well. So Yeah. And potentially another something else as well. Pretty stacked. It's gonna be pretty fun. And if you are, you know, sending data back and forth, you're, you know, working with forms, you're working with data of any kind. Sometimes that One thing that really bugs me is when people talk about this stuff in the context of PHP, and they're like, well, this is just PHP. It's like, well, call me when PHP

ESLint that to do

Park City at React Rally.

You're right.

submits that form, for

I I I didn't wanna call it just actions because I know. If you and then I use Drizzle Node to You write the words that are, like, super powerful or, like like, Dyson hairdryer map those functions to your validation

composable, You're like the way to do forms item page 2,

when you see them being used the 4 the field set or disable a button or show a spinner or, like, it's wild how you know, being able to maintain the the client side aspect as well. So Yeah. Yeah. It's really nice. And the the I think one thing that trips a lot of people up is that

I mean Oh. Come on.

Forms are a key component. If you're sending data around, hey, man. Forms. I I know a lot of React folks just use buttons or even worse like a DIV. Click send an event because it's easy. You Node, just send a fetch with a a button or something like that. But,

but they're they are just called actions, and then we'll talk about what form and server actions are in just a sec. Yeah. Can I actually just say even quickly? And I'm I'm thinking about just mounting it directly to the camera itself.

react actions for common use cases. Got it. I like it. Perfect.

And I do wanna say, I think

hey, forms are forms are great. And, if your page is server side rendered and you have a form, it will still work. Yes. It's it's beautiful,

Reusable, a tag. You say wherever these items are being used in the cache right Node, that just blow them out and and refetch them. And and that API to me is is awesome because that you can use in any form. And if you wanna make a reusable submit button component, about 6 months or so. So bunch of components. What what does that look like? Yeah. Totally.

actions. Actions. Alright. And actions are functions. I'm laughing because the episode title form actions and server

that you can use forms. That's also what I like so much about this API is that it is mark them with that

actions. And then the third one is in like, you could you could also run them in a useEffect. So if you have some other code that is sort of watching for a a specific change and you wanna you wanna submit this action to the action attribute of a form element. So you have a form element. You have your you normally have an action so it's Scott a dongle. Right? It has an input and output. You just use any USB c cable or not any USB c cable, but, like,

Yes. That's

meaning that you don't have to maintain state in JavaScript in order to send data to the server.

Damn. That's that's a good one. Oh, that's maybe that's like a good library if somebody wants to build a library that sits on top of this.

in documentation and everywhere, they're either called server actions or they're called form actions. So I got my types out of that, to the client will be coded into your your optimistic action. So the reference to the function that you've imported. And, again, that that function can be either some client side code that needs to happen when somebody

It's a huge missed opportunity to not call them reactions.

Yeah. Back to the, back to the web. You know?

So I was

action whenever that item changes, you can Node up a custom useEffect to to do that. So they're not called form actions? basically, an alternative to a cam link. So I have been chasing to display whatever it is you want. Like, for example, I was throwing up a toast message

this may be a thing even more in the React world than outside of it. Mhmm. Forms.

a function as being server only is actions with use server.

is probably for the best. I know people will colocate

Yeah. That that I think that, like you mentioned,

but you want the code to run server side, you have to explicitly products like this, like a tiny little pump. You're starting to see, like, the opposite, which is, like, people So actions, like I said, they can run server or on the client.

the killer feature knockoffs that are relatively affordable

it's really giving us the best parts of PHP without, So optimistic UI is the process of saying, hey.

go into a client component, actions allow you to tie types in the box and hits enter. Right? the hugest use case for on your server.

adaptation to this. Mhmm. But being able to just jump from server to client like Meteor did, like, 15 years ago

save user. And just like 3 things.

and that will be a thing. But that makes a lot of sense in terms of organization and making sure you're not leaking anything. I Node that's a concern.

Scott, do you wanna give a quick explanation of what Optimistic UI is? gremlins.

that code is never run client side. It's not gonna import any of your server dependencies on the client Node. And Next. Js has really good errors around this type of thing where it says that you're trying to do this

import it in, and just say, file as code that should only ever be run on the server. So, usually, I'll have, like, an actions dot ts file, Yarn it as a user server at the top, and then you write all of your

You can export it from a file, of this is being able to write a function with server side code in it. You can put raw

it starts to make sense after a little bit of a while.

And then when I say action, it's a function.

that file is by default

just moving them to a separate file

And

What do we got next here? Let's talk about optimistic state. So another, Big fan.

if you want to run a component on the client, you have to market with used client. But if you wanna run an action only server side, you have to market with used server. Right? It seems a bit

used server. So little bit of a funky thing to to sort of get getting used to, but and then Using actions. So now in order to use and the logic of what to do when it fails and retries

server to ESLint, and you're you're connecting the 2.

updater functions and and queries inside of that.

part of it is like a security thing where you have to explicitly mark something as a used server. The reason we have that is because you're you're crossing the boundary from time in between where your optimistic state and your actual state are going to be different. And, with all of the examples that I've seen so far, as, like, a backup.

because it is based on events, or it doesn't doesn't have to go to the server. Right? Like, there's a lot of stuff that happens only in the browser, boost to be able to have, totally done like that. So, yeah, they Sanity run anywhere.

Like a drag and drop might be a a good example of of something like that. Yeah.

need to be run on the client because it's it's something that only needs to happen inside of the browser React, meaning that it will be and and already is implemented in And they couldn't you couldn't put them in the same component submit logic

They can be run and line them up with the input. You know, sometimes you you fill out a form, and it just tells you at the top of the form what your errors Yarn, and then some nice forms will highlight the actual field that is invalid.

outside of a server component? Can these be done in a client component? Oh, yeah.

Word. I I have a question. Can you use these things form actions in React Vercel components compared to the things that I'm familiar with, but also,

You might wanna add an item to Yarn. When somebody clicks on an add to cart button, that might go to the server and add an item to the cart, it might just be entirely client side where you have, like, some state that is somebody's cart and you wanna add an item to it. You might all like a post, take your email in, and subscribe to a newsletter,

on the server is quite honestly the hugest benefit here, and and that's what I think most people are going to be using them for.

if it's being if it's pending, so you might wanna use that to, or a a route to invalidate, which I don't love because

and this will give you the information of and pending, which is often people use, like, use transition for to to create, like, a pending state.

Hey. More more info is not not a problem, but yeah. Yeah. Yeah.

and that was a bit of a pain. So you might not even need this one if you don't need it because you could also just pass this data down via props, do the validation for it. And then I was able to send any errors

form is being submitted. It must be used inside of a form element, React that you only want this code to run on the server? Because like I said earlier, 10 80 p and 30 frames a second on This will this is a hook that allows you to access if the you you do have access to it. It doesn't you don't need to pass it down. You could put this. I think the idea is that you're gonna have a single button component Server components is kind of a a funny word, in that because Oh, I don't I don't even necessarily mean And once that action has successfully resolved, then actions, whatever you're gonna call them. We'll explain all of that JS being able to your state it invalidates the entire page with a query param. Oh, yeah. So the Next. Js approach to this is currently, it's just like a URL submit that event handler. So you that's the example of it doesn't have to be tied to a form. That's why they're not just called form actions. They're just called

access to the form data object itself, also And when you of research in this area right now of, like, how do you make a good form library

again, disable inputs, show a spinner. This previously was the only way to get default value, that annoying error where it's like there's no thing. Right? Create, read, update, delete Yep. Of being able to that, like, being able to go from the server to the ESLint, of course, if your your whole stack is in JavaScript. I'm curious if there will ever be, like, a components are server by default.

but it's, again, it's still early days for that type of thing. That's the hardest part for me with any of this is when we're saying this is in Vanilla React. It's like, what is the server there? The I wonder if there ever becomes a point, which I kind of doubt at this point, but, like They allow you to interact with the site.

in React before this is, like, you gotta do your own state. You gotta listen for update functions. You have you gotta, like, set Scott, and you have initial state. And, like, it's just like, why is this so hard that I need to reach for a third party library use action state is a hook.

and we got all this React server stuff. Would React ever ship their own server? Doing great. We are, You set it to loading JS equal to true, right, when you click that Yes. That form, and then you said loading is equal to false on the state whenever it's returned. So this just gives you a nice little helper Sanity handy little bit for that. You know, one thing I really do love about this flow is the error message validation stuff Because,

All of that stuff is being added to React, which is something, like, I feel like I've been asking for that forever. You know? I've been asking for easier way to do forms.

to do it straight away. Like, why the one thing that we do so much in this thing is is have forms and submit them. Why is that not a first party thing? And and now it is. Now it is. It's it's absolutely beautiful. So I'm pretty excited that this is being added, and it's not something that we'd leave up to server components