'use server' directive at the top of a file or inside a function to mark it as a Server Action.action prop or can be called directly with startTransition.useOptimistic provide instant feedback before server confirmation.useFormStatus shows loading states during form submission.useActionState manages form state including validation errors.1'use server';23import { revalidatePath } from 'next/cache';45export async function addTodo(6prevState: ActionState,7formData: FormData,8): Promise<ActionState> {9const text = formData.get('text');1011// Validation12if (!text || text.length < 3) {13return {14success: false,15errors: { text: ['Must be at least 3 characters'] },16};17}1819// Save to database20await db.todo.create({ text: text.toString() });2122revalidatePath('/server-actions');2324return { success: true, message: 'Todo added!' };25}
useActionState: Manages form state with automatic error handling and resetuseFormStatus: Shows pending state inside form componentsuseOptimistic: Applies changes immediately, reverts on erroruseTransition: Non-blocking updates for non-form actionsrevalidatePath: Refreshes cached data after mutationsServer Actions keep mutations on the server while preserving UX.
| Demo | Description |
|---|---|
| Form Component | Enhanced form handling with progressive enhancement |
| React 19 Hooks | Deep dive into useActionState, useOptimistic, use() |
| Revalidation | Control cache refresh after mutations |