react-patterns

# React 19 Development Patterns ## Overview React 19 patterns for Next.js App Router, Server Actions, optimistic UI, and concurrent features. See Quick Reference for API summary and Examples for copy-paste patterns. ## When to Use - Building React 19 applications with Next.js App Router - Implementing optimistic UI with `useOptimistic` or `useTransition` - Creating Server Actions with form validation - Migrating from class components to hooks - Optimizing concurrent rendering with React Compiler - Managing complex state with `useReducer` or custom hooks - Wrapping async operations in Suspense boundaries ## Quick Reference | Pattern | Hook / API | Use Case | |---------|-----------|----------| | Local state | `useState` | Simple component state | | Complex state | `useReducer` | Multi-action state machines | | Side effects | `useEffect` | Subscriptions, data fetching | | Shared state | `useContext` / `createContext` | Cross-component data | | DOM access | `useRef` | Focus, measurements, timers | | Performance | `useMemo` / `useCallback` | Expensive computations | | Non-urgent updates | `useTransition` | Search/filter on large lists | | Defer expensive UI | `useDeferredValue` | Stale-while-updating | | Read resources | `use()` (React 19) | Promises and context in render | | Optimistic UI | `useOptimistic` (React 19) | Instant feedback on mutations | | Form status | `useFormStatus` (React 19) | Pending state in child components | | Form state | `useActionState` (React 19) |...