react-19-patternslisted

# React 19 Patterns - Comprehensive Guide ## When to Use This Skill Use this skill when: - Writing React components (Server or Client) - Using React hooks (standard or new React 19 hooks) - Implementing forms with Server Actions - Working with Suspense and streaming - Managing state and transitions - Optimistic UI updates - Migrating from React 18 to React 19 ## What This Skill Covers ### Core Patterns - **Server vs Client Components** - Complete decision tree - **All React Hooks** - Complete reference with TypeScript - **Suspense Patterns** - Boundaries, streaming, error handling - **Server Components** - Data fetching, caching, composition - **Client Components** - Interactivity, state, effects - **Transitions** - useTransition, startTransition, isPending - **Streaming** - Progressive rendering patterns - **Migration Guide** - React 18 → React 19 ### New in React 19 - `use()` - For async data in components - `useOptimistic()` - For optimistic UI updates - `useFormStatus()` - For form submission state - `useActionState()` - For Server Action state - Enhanced `useTransition()` - Better performance - Improved error boundaries - Better hydration ## Quick Reference ### Server Component Pattern ```typescript // ✅ Default - async data fetching export default async function ProjectsPage() { const projects = await db.project.findMany() return <ProjectList projects={projects} /> } ``` ### Client Component Pattern ```typescript // ✅ Use 'use client' for interactivity 'use