--- name: react-19 description: Guide for React 19 development with Actions, Server Components, and new hooks. Use for building React 19 apps, form handling, optimistic updates, and migrations. --- # React 19 React 19 (stable since Dec 2024) simplifies async operations, improves SSR, and enhances DX with Actions, Server Components, and new hooks. ## When to Use - Building React 19 applications - Async form handling with automatic pending\/error states - Server Components for SSR - Optimistic UI updates - Migrating from React 18 - Server Actions for full-stack forms ## Installation ```bash npm install react@19.2.1 react-dom@19.2.1 npm install --save-dev @types\/react@19.0.0 @types\/react-dom@19.0.0 ``` **Required:** Enable modern JSX transform in `tsconfig.json`: ```json { "compilerOptions": { "jsx": "react-jsx" } } ``` ## Core Concepts ### Execution Boundaries | Type | Runs | State | Access | |------|------|-------|--------| | Server Component | Server | No | DB, FS, Secrets | | Client Component | Browser | Yes | DOM, Browser APIs | | Server Action | Server | No | DB, APIs | ### Conventions - `"use server"` = Server Action - `"use client"` = Client Component - No directive = Server Component (in RSC environment) - `async` component = Auto-suspends ## Essential Patterns ### 1. Forms with useActionState ```javascript 'use client'; import { useActionState } from 'react'; function SignupForm() { const [state, formAction, isPending] = useActionState( async (prev, formData) => { const error = await createUser(formData.get('email')); return error ? { error } : null; }, { error: null } ); return (