react-patterns

Server Components and Actions in React 19 let you execute server-side logic directly within your component tree, eliminating client-side data fetching and reducing bundle size. Use the 'use server' directive to mark functions as server actions, then call them from client components to handle form submissions and data mutations securely.

React 19's useOptimistic hook enables optimistic UI by updating the UI immediately while server actions process in the background. Combine it with useFormStatus to track form submission state, creating fast, responsive experiences that reflect user intent before server confirmation arrives.

Suspense with concurrent rendering handles asynchronous data loading and code splitting by pausing component render until data arrives, displaying fallback UI in the meantime. Use it to improve perceived performance and enable prioritized rendering of critical content over secondary components.

Enforce server and client boundaries using TypeScript's 'use server' and 'use client' directives paired with strict type definitions. This prevents accidental serialization of non-serializable objects, ensures type safety across boundaries, and catches incompatibilities at compile time.

The use() hook in React 19 unwraps promises and accesses context in client components, enabling server-rendered data to flow seamlessly into interactive components. It simplifies async data handling compared to earlier patterns and works within Suspense boundaries for integrated loading states.

useFormState and useFormStatus hooks streamline form handling by binding server actions directly to form elements, eliminating manual state management and event handlers. They automatically track submission status, pending state, and form data, cutting repetitive form logic across your app.