react-patterns

# Vercel React Best Practices (Local/Docker)

Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. This version highlights the most important patterns for local installs or dockerized deployments.

## Purpose

Provide a high-signal checklist to avoid async waterfalls, reduce client payloads, and keep UI responsive without relying on hosted or edge-specific optimizations.

## When to Apply

- Building or refactoring React components or Next.js pages
- Implementing Server Actions, Route Handlers, or data fetching
- Reducing startup time or memory footprint for local installs
- Debugging sluggish UI or long hydration times
- Reviewing code for performance regressions

## Offline and Docker Focus

- Optimize for cold-start and steady-state responsiveness over SEO.
- Use in-process caches because the server process persists.
- Avoid sequential awaits even for local APIs or databases.
- Defer non-critical work until after render or after responses are sent.
- Minimize RSC props to reduce hydration and memory overhead.

## Top Findings

- Eliminate async waterfalls by starting work early and awaiting late with `Promise.all` or `better-all`.
- Use Suspense boundaries to stream UI instead of blocking the whole page on data.
- Reduce initial load and memory via dynamic imports, conditional loading, and direct imports.
- Minimize RSC payloads; pass only fields used and avoid duplicating serialized data.
- Cache hot server work: `React.cache` per request and LRU for cross-request reuse.
- Reduce client work with memoized subtrees, lazy state init, transitions, and `content-visibility` for large lists.

## Core Patterns

- `async-parallel` and `async-api-routes` to eliminate waterfalls
- `async-suspense-boundaries` to stream slow sections
- `bundle-barrel-imports` and `bundle-dynamic-imports` to reduce startup cost
- `server-serialization` and `server-dedup-props` to shrink RSC payloads
- `server-cache-react` and `server-cache-lr