react-19-patterns

The `use()` hook lets you read Promise values directly in components. Call `use(promise)` to unwrap the resolved value, and wrap your component in Suspense to handle loading states. It works with both Server and Client Components for cleaner async data handling.

Use the `useOptimistic` hook to instantly reflect user actions on screen while the server processes the request. It maintains local state changes that revert if the server action fails, providing immediate feedback and smoother form interactions.

Server Components render on the server and send HTML to the browser, reducing bundle size and enabling direct database access. Client Components run in the browser for interactivity. Use Server Components by default for data fetching and logic, Client Components for event handlers and hooks.

React 19 maintains backward compatibility with React 18 code. Migrate incrementally by adopting new hooks like `useFormStatus` and `useActionState` for forms, and transition existing components to Server Components where beneficial. TypeScript support ensures type safety throughout.

Streaming renders UI progressively as data becomes available instead of waiting for everything to load. Suspense boundaries pause rendering at specific components, showing fallbacks while data loads, delivering faster perceived performance and better user experience.

`useFormStatus` tracks the status of a parent form action, showing pending state for submit buttons. `useActionState` wraps a server action and manages both status and returned state, letting you handle results and errors from async operations directly.