A Server Action with validation and useActionState
Simulated server: createPost would live in a "use server" file, and serverReference plays React's generated client stub (serialize the arguments, POST, deserialize the result). useActionState, the form action and the pending state are real React 19. Try your own titles in the box.
A Server Function is an async function marked "use server" that runs on the server but can be called from the client like a normal function; used as a form action it is called a Server Action, works before JavaScript loads, and is a public HTTP endpoint that must validate its input and authorise every call.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a "use server" function renameList(listId: string, formData: FormData) that renames a to-do list only if the signed-in user owns it and the new name is 1 to 40 characters.
Write the client form for it using useActionState with a pending label and an error message.
Explain it without notes
What is a Server Function, how do you declare one, and how does the client call it?
What is the difference between a Server Function and a Server Action?
What is progressive enhancement and how do Server Actions support it?
Why must every Server Function authorise and validate on its own? What checks belong in it?
Preview
Console
Nothing logged yet.Expected console output
screen: Title needs at least 3 characters.
server saved: Learning Server Functions
screen: Posts saved: 1