React Server Components Form Actions + Server Actions

Scott and Wes are here to guide you through the world of React Server Components, shedding light on the intricacies of Form Actions and Server Actions. Get ready to level up your React skills as they discuss the ins and outs of these powerful features and share their expert advice on optimizing your applications.
Show Notes
00:00 Welcome to Syntax!
02:04 Brought to you by Sentry.io.
03:04 What are form actions?
04:05 Almost entirely React.
04:31 What is the 'server' in Vanilla React?
06:10 Would React ever ship their own server?
07:29 What are actions?
08:34 Two huge benefits to actions.
08:45 Avoid custom useEffects or third party libraries.
09:17 Calling server code from the client without any APIS.
11:31 Some examples of actions.
12:54 Can these actions be done in a client component?
13:40 Where to use actions.
13:49 On a form submit.
15:30 In an event handler.
15:57 In a useEffect().
17:13 How to actually use an action.
17:30 useActionState() hook.
18:49 The state of the action.
19:35 The bound action.
19:46 The pending state.
23:16 useFormStatus() hook.
24:38 Action inputs.
26:13 Server vs client.
28:30 This is not PHP.
30:31 What is optimistic UI?
33:26 useOptimistic() hook.
37:02 Some final thoughts.
40:18 Sick Picks + Shameless Plugs.
All links available at syntax.fm/766
------------------------------------------------------------------------------
Hit us up on Socials!
Scott: / stolinski
Wes: / wesbos
Randy: / @randyrektor
Syntax: / syntaxfm
www.syntax.fm
Brought to you by Sentry.io
#webdevelopment #webdeveloper #javascript

[@joseandkris]

In Remix, server actions are strictly through forms now and react server actions give me the ability to trigger actions from buttons and other things, which is I think getting the best out of both worlds. I like submitting thru forms, but also not always to have a form :)

[@WesBos]

yeah programatically is often needed - for example I'm running one on a stripe checkout callback.