0:00

Welcome to syntax, folks. Today we have

0:02

another episode for you on

0:04

React Server Components. So we did

0:06

episode 7 18 as an introduction

0:09

to React Server Components. And now

0:11

we're going to do another one

0:13

specifically on actions in

0:15

React Server and components. So

0:17

form actions, server actions, actions,

0:20

whatever you're going to call them. We'll explain all of

0:22

that is being able to call

0:25

server code or run code on the client

0:27

without having to do a whole bunch of

0:29

extra work is honestly a game

0:31

changer. I'm a big fan of this

0:34

idea of actions in React

0:36

Server Components. So it's

0:39

not even just server. A lot of this is client side

0:41

stuff as well. And we're going to sort of dig into

0:43

it, explain how it works, a lot of the use cases

0:45

and whatnot. So buckle on up.

0:48

How are you doing today, Scott? Doing

0:51

great. We are right

0:53

about to head out to Miami tomorrow, Wes.

0:55

I don't know when you're heading out, but

0:58

my family's heading out there and we're bringing

1:00

the whole crew along. So hey, I'm stoked.

1:02

We've never been. I'm sure the

1:04

kids are going to have a blast going to

1:06

museums and whatever they're going to be off doing.

1:08

But you and I are going to be at

1:10

React Miami, which by the time you're hearing this

1:12

is long and gone, but pretty stoked to be

1:14

out there. So yeah, excited. Yeah,

1:16

it's been been a while since I've been to a conference,

1:19

probably about six months or so.

1:22

So it seems like

1:24

everyone's really stoked about this one as well. It seems

1:26

like a really fun one. So I can't wait. It's

1:29

a somewhat busy conference season for me this

1:31

year. I'm doing JS

1:33

Nation. I'm doing

1:36

React Miami and then

1:38

potentially doing another one. We're going

1:40

to see if I can make it out to

1:42

Utah. There's one in a

1:46

Park City at React Rally. So

1:48

I'm going to see if I can do that or

1:50

not. Yeah, and in November,

1:53

we are going to be in New

1:56

York City doing another live

1:58

syntax as well. So yeah. Potentially

2:00

another something else as well. Pretty stacked.

2:02

It's gonna be pretty fun and if

2:04

you are you know sending data back

2:07

and forth, your you know, working with

2:09

forms, it working with data as any

2:11

kind, sometimes that that transmission whether that

2:13

is via the you why or the

2:16

server. You know these lines are getting

2:18

blurred and your tools really need to

2:20

get blurred as well. And that's why

2:22

we use something called a century which

2:25

is what the shows presented by to

2:27

track of all of our data and

2:29

how it works inside of our app.

2:31

We look for slow queries we with

2:33

for slow routes. we look for slow

2:36

for me events in those types of

2:38

things and were able to track at

2:40

any given point if something went wrong

2:42

in that process regardless if it was

2:45

happening on the server or the client

2:47

or that kind of fuzzy area in

2:49

between that now exists given how these

2:51

tools works. Else if you want error

2:54

handling, exception handling, all kinds of an

2:56

instant replay, bugs finding tools and and

2:58

of do century doubt I'll. Forward/syntax

3:00

Sign up and get a

3:02

two months for free are

3:04

a west form Actions I.

3:07

Don't know that much. About

3:09

React server components beyond what we've

3:11

talked about. I. Get the

3:14

general five and insects go back

3:16

and listen to episode number seven

3:18

eighteen that syntax that as them

3:20

forward/seven eighteen If you want to

3:22

learn more about. React. Server

3:24

components in general, but.

3:27

You know, working with data. Is.

3:30

A big part of the things most web

3:32

sites would they do, they load data. They.

3:34

Allow you to with the site enemy times

3:37

when you're interacting with the site, you're sending

3:39

data back to the server in data comes

3:41

from the server back to the client and

3:43

that whole process is something. You.

3:45

Do one hundred times. You know the

3:48

if you're building anything, you do that

3:50

a lot. especially if it's interactive. so

3:52

I am interested to hear exactly how.

3:55

Form. Actions in reactive or components compared

3:57

to the things that I'm familiar with

3:59

but also. I'm having my

4:01

life easier. Yes, I'm very

4:03

excited about this and I should say

4:05

that everything we're talking about today is

4:08

a hundred percent react a school not

4:10

a next ass south. There's one little

4:12

thing I'm a talk about at the

4:14

very end in regards to cashing in,

4:16

invalidating did us that is in next

4:18

year specific, but everything we're talking about

4:20

today is just. React. Meaning

4:23

that it will be in in

4:25

already is implemented in. Vanilla

4:27

React as well as all the that

4:30

the framework sadder out there. so it's

4:32

a question with that. There was a

4:34

new say Vanilla React in this regard

4:36

yet is the server component they're in

4:39

a Vanilla React. App in

4:41

twenty two. Yeah, for I'm. Sceptical:

4:43

Moses Kind of a a funny word. I'm

4:45

in that because no, I don't even necessarily

4:48

mean that. Component. As in.

4:50

Like a we. React. Component but

4:52

like. What? Is the server. Of

4:55

Ai Vanilla React site if you're not

4:57

using something like out what is the

5:00

server the Up The server can be

5:02

anything. I can be a server that

5:04

is running React on the service. It

5:07

can be a build step so like

5:09

Rak Severing opponents don't necessarily need a

5:11

server ancestry they can be pre rendered

5:13

as as part of a build stuff

5:16

instead of actually being on the server.

5:18

which is kind of interesting, but generally

5:20

yeah, you're going to reach for a

5:22

a framework that implements the whole servers

5:25

thing. For youth, whether that his remarks

5:27

were going to start seeing stuff from

5:29

them pretty soon on the racks over

5:31

components Next ass off first as a

5:33

party there, but there's a whole bunch

5:35

of other sort of projects that are

5:37

are working on the three now. One

5:39

of them which I'm really sad to

5:41

see is this can stack stuff so

5:43

he's just been like to and on

5:45

this from. Probably. I year

5:47

now I talked to him. Ah reacts

5:50

on last year. About

5:52

it in his second not totally sure and it

5:54

seems like he's he's such as really has some

5:56

ideas. For. How how this should work?

5:58

So what does this? And that

6:00

it. It depends. Yeah, and and you

6:03

can. You can implement it yourself as

6:05

well with with V, But it's again,

6:07

it's still early days for that type

6:09

of thing. That's. The hardest part

6:11

for me with any this has been were saying

6:14

this is in vanilla reacted like what is the

6:16

server their the I wonder if there ever becomes

6:18

a point which I kind of doubt at this

6:20

point but like. And. We

6:22

get Allison React Server stuff. Would react Ever

6:24

sit there on servers? Ah

6:27

yeah that's that's a great question in it is

6:29

answer to that is is maybe I'd like I'd

6:31

I don't know if they will buy it. Is.

6:33

The kind of interesting thing is that

6:36

a lot of the stuff that we're

6:38

talking about it server and or components

6:40

in the form action, server, actions, All.

6:43

Of that stuff is being added to react

6:46

which is something like I feel like I've

6:48

been asking for that forever. You know, I've

6:50

been asking for a easier way to do

6:52

forms. You like the way

6:54

to do for hims. In. React before. this

6:56

is like you gotta do your own state.

6:58

You got it. Yeah Alyson for update functions

7:01

he has he gotta like set, stayed in

7:03

your initial said and like it's like why

7:05

is this so hard that I need to

7:07

reach for a third party libraries to do

7:09

it straight away Like why is the one

7:12

thing that we do so much in this

7:14

thing is. Is. How forms and

7:16

submit them. Why? Is that not

7:18

a first part of thing? And and

7:20

now it is? Now it is is

7:22

is absolutely beautiful. Some pretty excited said

7:25

this is being added and it's not

7:27

something that we'd leave up to Frameworks

7:29

land so I was about it. Actions

7:31

they are often. You're going to hear

7:33

the word for max in and you're

7:35

gonna hear the words server action thrown

7:37

around on, but we're going to start

7:40

peeled back a little bit from swarms

7:42

Actions: Insurrection are just gonna call them.

7:44

Actions Rates as actions are

7:47

functions that can be run.

7:50

whenever likely when a former summit

7:53

at right like the this you

7:55

just use case for sir actions

7:57

form actions is when you submit

8:00

form and you want to run some

8:02

code. This is going to

8:04

be replacing a lot of your submit

8:06

logic that you've had, which

8:08

I was just saying, and they

8:11

can run either client-side or server-side.

8:13

So this is not entirely for

8:15

sending data to the server and

8:18

getting stuff back. It can

8:20

just run entirely client-side, which is a very

8:22

common use case where, all right, I have

8:25

this form or I have

8:27

this UI and when somebody does

8:29

something, I need to run

8:31

a function that will generate some state.

8:34

So I see two huge benefits.

8:37

Personally, I've built a couple things with them

8:39

already. I have a couple sites in production

8:41

using them. I see sort of two huge benefits to

8:43

this type of thing. First,

8:47

actions allow you to tie state,

8:49

which is your data, your

8:51

submit handler logic, like what happens when

8:54

somebody clicks a button or submits a

8:56

form, and pending, which

8:58

is often people use transition

9:00

to create a pending

9:02

state. Often you are

9:05

cobbling together your logic, your state, your

9:07

pending into a use-of-fact or

9:10

using a third-party library. Actions

9:13

allow you to sort of put that all

9:15

together into a single function. And

9:17

then the second huge benefit here

9:20

is that it allows you to

9:22

call server-side code from the client

9:24

without any sort of APIs. And

9:26

that's the massive benefit to me

9:29

is that you can

9:31

wire up a button that says save user,

9:34

have a user type into a form

9:36

input, click that button, and you can

9:38

bind that button to a function that

9:40

runs on your server side. That function

9:42

has database logic, validation, anything

9:44

that you would normally do on a server

9:47

without having to do a Graphql

9:50

API, a REST API, you know, like all

9:52

of the overhead of that type of thing.

9:54

So It's a massive productivity boost to be

9:57

able to have all of the data. Rp

10:00

see which means. Remote. Procedure

10:02

A Cough Be able to call server

10:05

side code from. The. Client

10:07

is is such a benefit. I feel

10:09

like I can just prototype stuff so

10:11

much faster and react. And of course

10:13

like. All of the other

10:15

metre framers have this idea as well

10:18

as just like are on their spots

10:20

sell kits site for syntax we have.

10:22

All. Kinds of buttons in the admin area

10:25

where you just suck on the button

10:27

and at run some code server side

10:29

and in can relate the status in

10:31

the pending directly to the twentieth. Yeah.

10:34

In In Now was even the first

10:36

time I saw anything like that was

10:38

In Remix. And I remember

10:40

trying those types of things and be

10:42

my guess is is what I wanted

10:45

you know get I used to calling.

10:48

Mongo commands from the Klein and meteor

10:50

so for me like as p C

10:52

feels very great and I know that

10:55

some people gill of skeptical cause they

10:57

the his. Been working in the

10:59

a difference low for so long but there's

11:01

definitely a lot of just generally nice things.

11:03

I think I'm a that especially if your

11:05

client and server our little bit more like.

11:08

Own. As a tightly coupled you know

11:10

up for a little while we swung

11:12

into this world where everybody's blog have

11:15

it's own a p i and like

11:17

hey if there's not like multiple things

11:19

consuming your. A B I or

11:21

you have any P I that so tightly

11:23

I will too so you know not toppled

11:26

tears to your you why it has that

11:28

ever going to be thing no actually need.

11:31

Totally. So actions They're often

11:33

tied to a form summit but they

11:35

do not have to be some time.

11:37

Some examples of what you might want

11:39

to use in action for his as

11:41

a very basic you want to have

11:43

somebody click a button. An. Increment

11:46

a number by one, right? Like that's that's

11:48

the very. that's the hello world of estate

11:50

management. As in commenting Amps: You might want

11:52

to add an item to cart when somebody

11:54

cuts on. Add add to cart button that

11:56

might go to the server and add an

11:58

item to the card. It might just be

12:01

entirely client side where you have like

12:03

some state that is somebody current, you

12:05

want to add an item to s

12:07

my are like a post, take your

12:09

email and and subscribe to a newsletter

12:11

and send some met a data about

12:13

like of for example if you are

12:15

listening to this podcast and you reach

12:17

every fifteen seconds there's a progress event

12:19

that gets fired by the audio element

12:21

rights. You might want to send their

12:23

data to the server side or you

12:25

might want to log that data to

12:27

local storage so that if somebody wants

12:29

to reinstate it. You can say that

12:31

data a pretty much. The. Whole,

12:34

cried, And

12:36

saying right? Create. Read. Update:

12:38

Delete Depth. Of being able

12:40

to map those functions to your

12:42

validation and your database logic on

12:45

the server is quite Aussie. The

12:47

hugest benefit here, and and that's

12:49

what I think most people are

12:51

going to be using them form.

12:54

Words. I ever question. Can.

12:56

You use these things. Outside.

12:58

Of a server component. Can these be

13:00

done in a client component? Oh yeah.

13:03

And. They can be run. Anywhere

13:06

avec meaning my side server side but

13:08

also and I'm time in your actions are

13:10

going to be server only meaning that

13:12

have the did I logic inside of

13:14

them and sometimes your actions are going

13:16

to be. Nice to be

13:18

run on the client because it's it's something

13:20

that only needs to happen inside of the

13:22

browser because it is based on events or

13:24

doesn't. doesn't have to go to the right

13:26

like. There's. A lot of stuff that

13:29

happens only in the browser and they can

13:31

be. Totally. Don't like that.

13:33

So yeah, they can really run

13:35

anywhere. I'm like a drag and

13:37

drop weight Be a good example

13:39

of a satanic that yes using

13:41

access. So here's my next point.

13:43

Actions can be called anywhere that

13:45

the most likely are going to

13:47

be called in these three areas:

13:49

One on a farm summit you

13:51

pass an accent Sue the. Action

13:55

attribute. Action to the

13:57

action attribute of a form. Elements: The you have

13:59

a form. The limit. You. Have your

14:01

he normally have an action. That.

14:04

Points to a your routes on

14:06

your server. What this will allow

14:08

you to do is you can say action

14:10

equals curly brackets and you pass it. The.

14:13

Reference to the function that you've important

14:15

and again that that function can be

14:17

either Some clients I code that needs

14:19

a happen when somebody. Some

14:22

it's not form. Or.

14:24

It can be some server side

14:26

code that happens when some estimates

14:28

the form and they will progressively

14:31

the. Tall

14:33

Back what's the word for that? Testing

14:35

or progressive enhancement? Maybe turn Javascript off?

14:38

They still will work. Young says that

14:40

they they have been bound to that.

14:42

And I do wanna say i think. This

14:45

may be a thing even more in the react world than

14:47

outside of it. Forms Who forms

14:49

are again components if you're sending data

14:51

around him and forms and I know

14:53

allow rak folks to seize buttons or

14:55

even worse than like a div clips

14:57

and then he then he the Cz

15:00

in addition to fetch with a a

15:02

button or something like that. But. A

15:04

forms are our friends are great and it as

15:06

your pages of said rendered and you have a

15:09

form it will still work. Yes it's

15:11

It's beautiful house that you can use

15:13

ones. That's also what I like so

15:15

much about this A P I is

15:17

that it is a built on forums

15:19

and form data Yemeni that. You.

15:22

Don't have to maintain stay and javascript

15:24

in order to send data to the

15:26

server. Yeah, back to the air. Back.

15:28

To the web, you know that's the first

15:31

one, a form summit the second one. As

15:33

you might want to call Programmatic Li I'm

15:35

in an event handler, right? So you use

15:37

something like Downshift To to create our a

15:39

combo box and you type something and when

15:42

somebody hit enter on an item in the

15:44

combo box, you might want to programmatic Lee

15:46

Summit that event handlers a huge act. that's

15:48

the example of it doesn't have to be

15:51

tied to a form. That's why they're not

15:53

just called for Mac since they're just called.

15:55

Axes and then the third one is in. I could

15:58

you could. You can also run the many users. Accept

16:00

we have some other code that a sort

16:02

of watching for as as specific change you

16:04

on are you on a summit this Action:

16:07

Whenever that item changes you can put up

16:09

a custom use affected to do that so

16:11

they're not called form actions. They're.

16:13

Not call for max as they are called. Action.

16:16

Accept size and actions are for

16:18

gun and laughing because the episode

16:20

had a form, actions and server

16:22

actions Size: Yes! Neither.

16:26

I I didn't wanna call it just

16:28

action. I know because I know if

16:30

you when you see them being used.

16:33

In. Documentation and everywhere it's they're either

16:35

called server actions or they're called for

16:37

max and know. But. They're

16:39

they're just called actions and then we'll

16:41

talk about what form answer actions aren't

16:44

just a sec. Yeah, can I actually

16:46

just say even quickly I the it's

16:48

a huge mess up to eat enough

16:50

call them reactions. I mean,

16:52

ah, come on, let's

16:55

erase. Damn. That's

16:57

that's a good one. Oh, that's maybe. that's

16:59

like a good library. The somebody must have

17:01

a library that. Sits. On top of

17:03

this, For. Usable compose

17:05

of will. React. Actions

17:07

for a yam. His case got it

17:10

and my like it. Perfect. Success

17:12

as a piss I using action.

17:14

So now in order to use

17:16

an actual action you can like

17:19

I said past them to a

17:21

forms action attributes but if you

17:23

want a little bit more control

17:25

you're going to use one or

17:28

are. All of the following sucks.

17:30

So the first one is the

17:32

use action state huck this was

17:34

previously in in today. If you

17:36

go to the React sucks. It's.

17:39

Going to say use form state.

17:42

And that has changed. Because.

17:45

Partially because of have some comments I

17:48

put on the get how partially cause

17:50

of they talk to Ryan Florence from

17:52

remarks about like it was kind of

17:54

funky, like I was like learning it

17:57

smells like this. Seems.

17:59

Odd. where in

18:01

order to get the status of, is

18:04

it pending or not, is it currently being sent to

18:06

the server and coming back? In order

18:08

to get that data and

18:11

in order to call it, it

18:13

was two separate hooks. And

18:15

you couldn't put them in the same component

18:18

because one of them had to go inside of a

18:20

form and one of them has to go above the

18:22

form. And it's just like, well, yeah. That

18:25

doesn't make any sense to me. So I wrote

18:27

some comments on GitHub and the React

18:29

team reacted to it and

18:32

they changed the API to use action

18:34

state, which is much better in my

18:36

opinion. I'm really excited about this. So

18:40

use action state is a hook. You

18:42

pass it your action and

18:45

it's going to return to you three

18:47

things. First, the

18:49

state of the action, and this could be

18:51

a few things. So once

18:54

you call an action, it either

18:56

does something on the client side or it goes to the server

18:58

side and it's going to return to you some

19:00

data. And that could be

19:03

success messages. It could be some error

19:05

validation that needs to be displayed to

19:07

the user. It might be

19:09

previous form state or initial state.

19:12

So if you are trying to read, you

19:15

fill out a form, it didn't

19:17

work. You want to do it again. You

19:19

can get the data from the previous submit.

19:22

Or initial state is if you want

19:24

to pre-populate some of the inputs in

19:26

an action, you can do that

19:29

with the use action state. So

19:31

the initial state is

19:34

the first argument. Then you have

19:36

the bound action itself. So

19:38

you would pass that action to

19:41

the form or the button click or

19:43

the programmatic event handler. And then the

19:45

third one is most importantly, the pending

19:47

state. So this is going to be

19:49

a Boolean of is

19:51

this action currently running? And

19:54

because actions are asynchronous, you

19:58

can await inside them. Likely you're going to be. doing

20:00

something like await database.save. You

20:03

might be fetching an external API, things

20:05

like that. And if

20:07

that promise is currently pending,

20:10

then you probably want to do

20:12

things like disable the

20:14

field set or disable a button or

20:16

show a spinner or any

20:19

number of things you want to do while

20:21

something is currently pending.

20:23

So it gives you a nice Boolean and

20:25

then you can use that Boolean anywhere in

20:28

your page to display whatever

20:30

it is you want. For example, I was

20:32

throwing up a toast message when

20:34

it was pending saying like saving

20:36

blah, blah, blah, blah. And then when

20:38

the data came back in

20:41

the first argument that I talked about, then

20:43

I would update that toast message to say

20:46

item blah, blah, blah saved. Yeah.

20:49

And that's really great because the alternative to that

20:51

is you create your own state variable. You

20:53

set it to loading is equal to true, right?

20:56

Then you click that form and then you

20:58

said loading is equal to false on the

21:00

state whenever it's returned. So this just gives

21:02

you a nice little helper, handy little bit

21:04

for that. One thing I really

21:06

do love about this flow is the

21:08

error message validation stuff because one

21:12

of the things that working with forms,

21:14

bad UX, people don't get right all

21:16

the time, form error

21:18

messages validation. Something

21:20

went wrong in the server process returned

21:23

and maybe the form isn't responding the correct

21:25

way. This makes it so easy

21:27

to get that right because

21:30

as all you have to do is make

21:32

sure your server returns the

21:35

proper error message with whatever you want to

21:37

say and your forms become

21:39

super reusable because you can

21:41

have a if error check for

21:44

error message just display the error. I do

21:46

this all the time in Svelte form action.

21:49

So I think this is a big

21:51

win for a lot of like easy

21:53

accessibility. Yeah, I actually

21:55

hooked this up with Drizzle Zod and

21:58

it was beautiful because

22:00

I created

22:03

my schema in Drizzle

22:05

for the database and then I got my

22:08

types out of that and

22:11

then I used Drizzle Zod

22:13

to also do the

22:15

validation for it and then I was able to

22:17

send any errors to the client

22:21

and line them up with the input. You

22:23

know sometimes you fill out a form and

22:25

it just tells you at the top of

22:27

the form what your errors are and then

22:29

some nice forms will highlight the actual field

22:31

that is invalid. That is

22:34

much nicer. I did find myself

22:36

leaning a lot more on just

22:38

like HTML validation because of

22:40

the whole sometimes you don't

22:43

your whole form is not a client component is

22:45

maybe it's just a server component but it's

22:47

it was a really nice flow to

22:50

be able to do that type of

22:52

thing and I'll shout out Alex.js on

22:54

Twitter. He's the creator of TRPC. He's

22:57

doing a ton of research

22:59

in this area right now of like how

23:01

do you make a good form library with

23:04

this and you don't need a form library

23:06

but he's sort of like looking at like

23:09

what are the patterns gonna start to look like where

23:11

if you want to make a reusable bunch

23:13

of components what does that look like. Yeah

23:16

totally. Next hook we have here

23:18

is use form status. This

23:20

will this is a hook

23:22

that allows you to access if the

23:25

form is being submitted. It must

23:27

be used inside of a form

23:29

element and this will give you

23:31

the information of if it's

23:34

being if it's pending so you might

23:36

want to use that to again

23:39

disable inputs show a spinner. This previously

23:41

was the only way to get information

23:43

of if a form is being submitted

23:45

or not and that was

23:47

a bit of a pain so you might not

23:49

even need this one if you don't need it

23:51

because you could also just pass this data down

23:53

via props but you

23:56

you do have access to it it doesn't you don't need to

23:58

pass it down you can put this I

24:00

think the idea is that you're going to

24:02

have a single button component that

24:04

you can use in any form. And

24:07

if you want to make a reusable

24:09

submit button component, you can use the

24:11

UseFormStatus hook to

24:14

figure out if it's parent form, whatever

24:16

it is, is currently

24:18

being submitted via the pending state. It

24:21

also gives you access

24:23

to the form data object itself,

24:26

the method, which I can't figure out why you

24:28

would need that in action as well. Yeah.

24:31

Hey, more info is not a

24:34

problem, but yeah. Yeah.

24:38

Next, let's talk about actions themselves

24:40

and their input. So just like

24:42

a function, an action,

24:45

whether it's a server action, whether it's a

24:47

client action, whether it's a

24:50

form action, can take in

24:52

any data that you want. So most

24:54

of the time, if you hook up

24:56

an action to a form element, you're

24:58

going to get a form data object. A

25:01

form data object is, if

25:03

you're not familiar with it, is a

25:05

JavaScript API for... You

25:08

can take an entire form with all of

25:10

its inputs and all of the data that

25:12

the user has taken in. You

25:14

can convert that entire form to a

25:16

beautiful object and have all of the

25:19

data that you want. What this will

25:21

do is you have access to that whole object

25:23

and you can then pass that

25:26

data into your database saves or whatever it is

25:28

that you're going to do. So

25:30

for many cases, you no longer

25:32

have to use state form handlers

25:34

on change, on input, default

25:36

value, that annoying error where

25:39

it's like there's no change

25:42

handler tied to this, whatever

25:44

that error was. I hated that one. You just

25:46

pop a form on the page, give

25:48

your inputs names and attributes. When

25:51

you submit the form, your action will receive a

25:53

form data object and you can use it however

25:55

you wish. You can also programmatically

25:57

pass other data to it if you want

25:59

as a... well. If you're not using it

26:01

with a form, you're just using it programmatically.

26:03

It's just a

26:05

function. Actions are just functions.

26:09

And you can use them with the hooks to

26:11

get some of this additional functionality. So

26:14

actions, like I said, they can run server

26:16

or on the client. And

26:19

how do you tell React that

26:21

you only want this code to run on

26:23

the server? Because like I said earlier, the

26:26

killer feature of this

26:28

is being able to write a

26:30

function with server-side code in it. You

26:33

can put raw SQL statements

26:35

inside of this function. You can export

26:37

it from a file, go into

26:40

a client component, import it in, and

26:43

just say on submit

26:46

or action equals save

26:48

user. And just like that,

26:50

being able to go from the server

26:52

to the client, of course, if your

26:54

whole stack is in JavaScript, I'm curious

26:56

if there will ever be a PHP

26:59

adaptation to this. But

27:02

being able to just jump from server to

27:04

client like Meteor did 15 years ago is

27:09

absolutely beautiful. So the

27:12

way that you mark a

27:14

function as being server-only is

27:17

by either inside

27:20

of the action itself. And

27:22

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

27:24

write the words, use server,

27:26

in quotes. And that marks that

27:29

function as a server-only function. And

27:31

that will make sure that that

27:33

code is never run client-side. It's not going

27:35

to import any of your server dependencies on

27:38

the client-side. And Next.js has really good errors

27:40

around this type of thing where it says,

27:42

you're trying to do this, and

27:44

you shouldn't have. What's more likely is

27:47

you're going to have like a lib folder

27:49

with all of your functions inside of that.

27:51

And every single file inside of there, you're

27:53

just going to put use server at the

27:55

top of the file. And that marks that

27:57

whole file as... Code

28:00

that should only ever be run on the

28:03

server. So usually I'll have like an actions.ts file

28:06

Mark it as a use server at the top and then you

28:08

write all of your Updater functions

28:10

and queries inside of that

28:13

Yeah, that that I think that like

28:16

you mentioned just moving them to

28:18

a separate file is probably for the

28:20

best I know people will co-locate and that will

28:22

be a thing But that makes

28:24

a lot of sense in terms of organization

28:26

and making sure you're not leaking anything. I

28:28

know that's a concern One thing

28:30

that really bugs me is when people talk about this

28:33

stuff in the context of PHP and they're like well

28:35

this is just PHP it's like we'll call me when

28:37

PHP is a client-side scripting

28:39

language as well because It's

28:42

really giving us the best parts of

28:44

PHP without you know I'm being

28:46

able to maintain that the client-side aspect as

28:48

well. So yeah. Yeah, that's really nice And

28:51

the I think one thing that trips a lot

28:53

of people up is that Server

28:56

components by default if you do

28:58

not put a use client in

29:00

that file That file

29:02

is by default server only and if

29:04

you put a function in that file

29:06

So you have a server component file

29:08

you put a function in there. It

29:11

will also be run on the client side

29:13

So you have to mark client components with

29:16

use client and you have to mark server

29:19

Actions with use server

29:22

and for a lot of people they're always like oh,

29:24

that's stupid. It's a kind of a funny way to

29:26

do it because components are

29:28

server by default and If

29:31

you want to run a component on the client, you have

29:33

to mark it with use client But if you want to

29:35

run a an action only server

29:37

side you have to mark it with

29:39

use server, right? it seems a bit

29:41

a bit bizarre, but they're If

29:45

part of it is like a security thing where

29:47

you have to explicitly mark something as a use

29:49

server the reason we have

29:51

that is because you're crossing the boundary from server

29:55

to client and you're connecting the

29:57

two and If you. Want

30:00

to do something that his client

30:02

side like. Put. It in an event

30:04

handler. But. You want the code

30:06

to run server side you have to

30:08

explicitly mark them with that use server

30:10

So little bit of a funky thing

30:12

to to start to get getting use

30:14

to buy it starts to make sense

30:16

after a little that a while. Ah

30:19

what are we got next year or

30:22

less of a optimistic state. So another

30:24

I'm hook we have here is called

30:26

the use Optimistic Scott. You want to

30:28

give a quick explanation of what optimistic

30:30

you I is. Yes, So

30:32

optimistic you I is either. The

30:34

word optimistic here comes from the

30:36

fact that you are. Optimistic.

30:39

Remember thinking that this server

30:41

side action that you're doing

30:43

will be. Successful Rights.

30:46

So let's say you are you.

30:48

You have like a to do

30:50

list. You submit that to do

30:52

list. In. An ideal

30:54

situation. That. To do typically

30:56

goes the server gets lodged in the

30:59

database and then that gets populated probably

31:01

and he are you Why like a

31:03

typical to do list right it would

31:05

pop up and and. You. Know

31:07

that server process can take some time.

31:10

there's a round trip there and users

31:12

are you. You know when they click

31:14

something and it doesn't happen instantly your

31:16

users might try to cook it again

31:18

and my think your app is broken.

31:21

Your app is gonna feel slow on

31:23

a bad network that's going to take

31:25

even longer and it's going to feel

31:27

bad. So optimistic you why is the

31:30

process as saying hey I feel like

31:32

this thing is going to succeed and

31:34

therefore I'm going to update the you

31:36

why? He immediately. With the

31:38

success state so. Even. without

31:41

getting the server. Database.

31:44

Storage of that to do with

31:46

successful years and still populating that

31:48

to do in the are you

31:50

why Instantly. therefore the you

31:52

i feels very snappy and in

31:54

a situation where that would then

31:56

fail ah yeah to handle that

31:58

so it would remove

32:00

it from the UI or it would

32:03

give an error message. There's various ways

32:05

to handle that. But basically the optimistic

32:07

part of this whole thing is that

32:09

you're handling your UI as if your

32:11

server calls optimistically are going through. Yes,

32:14

that's a great explanation of that type

32:16

of thing. And I love when apps

32:18

have an optimistic UI because you don't

32:21

have to sit there and wait, even

32:24

if it's two, 300 milliseconds. Like

32:26

a good example is if you just have

32:28

a cotudu list or a chat app in

32:30

Slack. As soon as I hit enter in

32:32

Slack, it's sent. 99.999%

32:35

of the time that message is going to be sent. And

32:40

Slack will render it out as if it was

32:42

sent, but they will also provide a little bit

32:45

of UI being like, it's

32:47

not actually sent. It looks like it's sent for

32:49

you, but maybe it's great text. Maybe there's a

32:51

little spinner beside it. Maybe

32:53

nothing. Maybe they just show it. If

32:56

there is a failure, then they'll

32:58

show some sort of UI to you. Or

33:01

maybe it cries again. Yeah. Yeah.

33:04

I'll retry as well. Yeah, we do this

33:06

in my habit tracker because that was the

33:08

whole thing. You'd click it, and on network

33:10

conditions that weren't great, it wouldn't

33:12

necessarily even look like it was clicked. And you might click

33:14

it again. That causes a whole

33:16

host of issues. So yeah, optimistic UI.

33:19

It really helps your applications. It's

33:21

like cheating to feel faster. It's a

33:23

great technique, yeah. So

33:26

use optimistic works with your actions that

33:28

you already have. And the way that

33:30

it works is it takes in two

33:32

things. It takes in one, your state.

33:35

So your state might be, if we're talking about

33:37

a chat application, might be an array of messages

33:39

that have been sent. So it takes in your

33:41

existing state of the messages. And then it also

33:43

takes in your action that

33:46

needs to be submitted once

33:48

somebody types in the box and

33:50

hits Enter, right? So from that

33:52

action, you get two things. You get

33:54

your state with any optimistic state

33:56

added to it. And

33:59

You get a method. It for adding new

34:01

optimistic messages. So the idea

34:04

here is that Use Optimistic

34:06

is going to proxy your

34:08

state. And give

34:10

you. A. Message for

34:12

optimistically adding onto that state

34:15

so. Year. Your actual

34:17

state is Alice does five messages

34:19

and you're optimistic state as a

34:22

list of six messages. And

34:24

when you go from that five to

34:26

six he hit enter you immediately optimistically

34:29

add that new state to it as

34:31

well as you could. you could zero

34:33

flag and they're called pending or something

34:35

like that if you want to show

34:38

that it is currently pending and then

34:40

you go ahead and submit your your

34:42

action and that optimistic state. Understands

34:45

that there is an action being

34:47

submitted inside of it. And

34:50

once that action has successfully resolved,

34:52

then your back to a spot

34:54

where you're optimistic state and your

34:56

actual state are the exact same

34:59

thing. So there's only ever. A

35:01

little bit of. Time

35:04

in between where you're optimistic state

35:06

and your actual state. Are.

35:08

Going to be different in a was all of

35:10

the examples that have seen so far. There's.

35:12

Very few samples out there of people

35:15

using this already use a what people

35:17

are doing is just throwing the entire

35:19

trying to replicate what it looks like.

35:22

That. Would come back from the server

35:24

and by then throwing an extra slag variable

35:26

on there being like. This. Is

35:28

pending or this is optimistic and than

35:31

that way you can. Show. A

35:33

spinner some and that's what I have not

35:35

found. His. Any patterns

35:37

for showing how to like?

35:39

Roll back, You know, like

35:41

wouldn't than than look like. When

35:44

it's sales, there was something now. Apollo

35:46

did really well. Yeah, I'm for graft

35:48

you all. They had nice ducks are

35:50

optimistic rollbacks. I've done that myself like

35:53

yes, that. It's kind of a tricky

35:55

a you X thing in general because

35:57

I will you. Do you pay? That

36:00

out of the list he recently like there

36:02

are you x considerations there that I think

36:04

are a little bit. More.

36:07

I. Don't know. a little bit more

36:09

deep than just he do it for

36:11

me, you know exactly. I think that's

36:13

why it doesn't do any of that.

36:16

Yeah, I just himself because you have

36:18

to put that own logic in in

36:20

your action. So again, The.

36:22

Way that this will generally

36:24

work is that you take

36:26

your your existing action. And.

36:29

You call that action from within

36:31

your new optimistic action and the

36:34

logic of what to do when

36:36

a sales and reach rise. Will

36:39

be coded into your your optimistic

36:41

action. So instead of taking your

36:43

your existing server action and piping

36:45

a directly into a farm implants

36:47

you're sort of wrapping it in

36:49

your wrapping both your states and

36:51

your your action in use optimistic

36:53

hook and then that will allow

36:55

you to. Add. Your custom logic

36:57

in there and. Proxy. Through

37:00

your optimistic state. So.

37:02

That is action. Everything we've

37:04

touched upon so far as

37:06

react only miss it tears

37:08

really well with working with

37:11

caches so we're seeing next

37:13

us has this idea as.

37:15

A cash and a cast clearing and what

37:18

that will allow you to do is. If

37:21

you have a list of seven items

37:23

on a page in one of your

37:25

actions is to update or delete one

37:27

of those items or to add a

37:29

new one yours. Get into this weird

37:31

situation where especially with pagination were. Okay

37:34

with that. Now is done many

37:36

to reset. The. Data that

37:38

is on that page in In in

37:40

Smelt can't we? We have this as

37:43

well and and I think the smell

37:45

care approaches just it invalidates the entire

37:47

page and just sort of like researches

37:49

all of the data on that page

37:52

and it does raise our rights.yeah you

37:54

know there's you. could do it different

37:56

ways like you could push into. An

37:59

array and. That is. Just

38:01

grabbing a whole new array of data.

38:03

I think grabbing a yeah array of

38:05

data is fine but yeah we're just

38:07

doing were just invalidating the page or

38:09

that specific data with or query pram.

38:11

Oh yeah so the next yes approach

38:13

to this is currently it's just like

38:15

as your route or are a route

38:17

to validate which I don't love because.

38:20

I. Don't know what page I'm on when I'm

38:23

writing a component. The the server

38:25

action doesn't come. With. The current

38:27

page that you're on susannah hard to do

38:29

that type of thing. however as a new

38:31

they have like this unstable cash eight the

38:34

I which is much better and the weather

38:36

that worse as you can tag your taxes

38:38

with a bunch of different tags that you

38:40

could say like. Items.

38:43

Item. Page Two. Items

38:45

Sports and then you can invalidate

38:47

a tag is a wherever these

38:49

items are being used in the

38:51

cash right now. That. Just

38:54

blown out in and resets them and and

38:56

that a p I to me as is.

38:58

awesome because most likely what you're going to

39:00

do is somebody gonna summit a form that

39:02

either creates a new items, updates an item

39:04

or deletes and items and you're going to

39:07

want to say i write why Saved it.

39:09

Now. What I want to tell the client

39:11

to do is resets. The

39:13

list of items that are on that specific

39:16

page and that a P I is. Is

39:18

pretty slick. Yeah, yeah it is.

39:20

It's Europe as. Ninety. Percent of

39:23

the time when given media. Ninety nine percent

39:25

of the time when you're gonna be doing

39:27

here. So call Well, that. that was super

39:29

informative. You know? I think. This.

39:32

Sort of world where we're talking about

39:34

actions with it that you know is

39:36

there the remix flavor of it? The.

39:38

Salt. Flavor of It or now

39:41

the Rec server components or react.

39:44

Flavor. Of it is the right direction

39:46

for me, this is the direction that.

39:48

I have been waiting for her and react.

39:50

pricing for a long time is kind of

39:53

been on the were making things hard for

39:55

you kind of position for a lot of

39:57

this, especially in regards to form handling and

39:59

things like. So. For.

40:01

Me, This is a step in the

40:03

right direction for React is making something

40:06

easier for me. Yeah, that's that's where

40:08

I wanna be in React land I

40:10

wanted. I wanted to get easier because

40:12

hate we. We have powerful tools. Nellis

40:15

making an awful tools, friendlier tools. big

40:17

fans. Ah, let's get into sick tix

40:19

way yeah for me today. Yeah.

40:22

We are headed to Over At War,

40:24

We're headed to Amsterdam and we're going

40:26

or Florence and stuff because I'm I'm

40:28

speaking over there And so we're doing

40:30

a little bit of a two week

40:32

vacation to bounce around Europe for a

40:35

little bits and. One. Thing

40:37

when you have kids yet Car seats.

40:39

How are you going to do that with their

40:41

kids in car seats? months? That's not going to

40:43

work very well. So we got these inflatable car

40:45

seats. West's They're good. They're like Booster cares. Our

40:47

kids are old enough for boost your chair, so

40:49

they're not like a car that he's had a

40:51

child on A? Yeah, Yep. Yep! Uncommon

40:54

to car see, but it's a booster seats

40:56

for that. or could you graduated to those?

40:58

but you have an inflatable booster seat. How

41:00

you gonna blow the say not? look corny.

41:02

Got these little miniature air and his little

41:04

miniature air pump. It's tiny. It's a

41:07

little tiny little air pump and I have

41:09

like us a portable air pump. As about

41:11

this big that's us be powered but this

41:13

thing is literally like this big and I

41:16

has a built in battery. see you charge

41:18

it up and it can blow up an

41:20

air mattress. know kind of stuff but specifically

41:22

for us. We're going to be using it

41:24

if we're renting a car or maybe were

41:27

even taking a taxi or something. We.

41:29

Need to be able to quickly

41:31

inflate these booster seats, deflate them?

41:34

whatever. and it's a little twenty

41:36

three dollar. Little Air Pump

41:38

World We what a wild world since I

41:40

his eye for likes he be like pop

41:42

and by hand would be you know they

41:44

have this tiny little pump it is is

41:46

really pretty amazing are we give it a

41:48

try. Last name for the first time and

41:50

really stoked about itself. I check it out.

41:53

it's a tiny portable ultra many air pump

41:55

which really wow. That's. Awesome

41:57

utes. It's wild how.

42:00

The motor technology has improved

42:02

in the last. Couple.

42:04

Years Because you're You're starting to see. Products.

42:07

Like this like a tiny little puppies are

42:09

you see like the opposite which is that

42:11

people have luggage that you can suck the

42:13

air out of the i'll get out from

42:15

France more and as that's you can now

42:17

do that because you can put of. To.

42:20

Can put a tiny little pump inside

42:22

of luggage or your seen these tiny

42:24

little blowers that are like super powerful

42:26

or like. Mike. Tyson hair

42:28

dryer knock off that are

42:30

a relatively affordable because. Like

42:32

motors. And. Sands.

42:35

And and battery gotten the and batteries as

42:37

well as a being able to pack. A.

42:40

Decent sized battery life in them selected. The

42:42

motors are getting more efficient. the batteries are

42:44

getting better. You're starting to see all these

42:46

really interesting new products. Yeah.

42:49

I'm going to sick Fec. Z.

42:52

Aber media live streamer

42:55

cap for case so

42:57

named assesses. This is

43:00

a. It basically

43:02

is an alternative to a

43:04

can link. So I had

43:06

been seeing some frame rate

43:09

gremlins. This. In assets that it

43:11

was. It's a chrome issue at the end of the

43:13

day, but I decided to keep this because. They

43:15

can link forte. Is.

43:18

A pain in the but because it. Is

43:20

us be A and it's like a

43:22

dongle severe hugging a higher D H

43:24

D my into the can link for

43:27

case and then you turn up like

43:29

that into. Like. Then you

43:31

have the plug it into likes I don't have

43:33

us be on my Macbook so yeah of have

43:35

a converter or you plug it into a hub

43:37

and then the can link for k doesn't work

43:39

with honorable for hubs. So. You

43:41

can plug it into the have sides. I

43:43

did a little bit of research and this

43:46

is the one that lived People recommending. It's

43:48

cheaper than the gambling for case it's a

43:50

box. So. It's not a dongle

43:52

right as input and output Aegis use any

43:54

you Spc cable or nine he is busy

43:56

with see cable but like. A.

43:58

Good news B C K. And

44:00

I'm I'm the about just mounting it

44:03

directly to the camera itself. Nice. let.

44:05

Wherever. I go edge sword a habit and.

44:08

It's. Been awesome at sixty frames a

44:10

second on. Ten. A D

44:13

P, and thirty from second on. Forte.

44:16

Which is I think the same as the camera as well.

44:18

Plug. And play it's been working great

44:20

in also the giving of the whenever

44:23

I would open up my photo booth

44:25

on Mac or Sex. Or

44:27

out. What? The calls macro aca

44:29

yeah I would as a like chains.

44:32

Two. Different camera in the back to the can

44:34

links to get to work for whatever reason. So.

44:37

This is a little gremlins with the can. Like

44:39

that I was I was having not enough to

44:42

be too much of an issue. but if you

44:44

don't have something and you're looking at buying it

44:46

the tamely for case been out for like. Eight

44:49

Years and has been updated. The thing as. As

44:51

Z is awesome. Good, really affordable and

44:54

the earth's really warm. I've been I

44:56

ran at from. And. I'll

44:58

probably. Thirty. Hours

45:00

straight. I also tested a bunch of the

45:02

Amazon like knock off once in the like,

45:05

I had one lying around to the sec.

45:07

Twenty bucks as like a backup. The.

45:09

Color on it is. As

45:11

Leaders isn't merely that were. But then,

45:14

collars? Awful. Yeah, Now that I didn't

45:16

think that. That. Would

45:18

matter, you know? but I don't know

45:20

how our video compression works. He

45:23

also cat en route necessarily know how capture

45:26

cards work. I had no idea he would

45:28

have done anything like affecting color but I

45:30

guess at my you do not go with

45:32

it he boasts yeah I guess because it

45:34

needs to change. It

45:36

from an Hd my stream to

45:38

whatever a web cam is looking

45:40

for. So. It, It literally has

45:43

to do something. There's chips in them. that's

45:45

why they're expensive, right? It's not just deaths

45:47

a converter were wires get connected to wires.

45:49

so I was. I was impressed that. Are

45:52

are surprised that that that knock off one

45:54

looks so terrible work cool why I like

45:57

this, I, you know, I have one can

45:59

link for. One him link that like

46:01

a billion years old. so maybe I

46:04

should upgrade by non forty one, two

46:06

or something that has four kids. Well

46:08

considering camera guy. So yes, ah right,

46:10

that's it for today is anything else.

46:13

Now. Think so much were set up. This is really

46:15

really super great gal out for to given all the

46:17

stuff a rip. Pace.

46:20

Be.