react-best-practices

React & Next.js Performance Patterns

Performance optimization guide for React and Next.js applications, based on Vercel Engineering practices. 8 categories organized by impact.

When to Apply

• Writing new React components or Next.js pages
• Implementing data fetching (client or server-side)
• Reviewing code for performance issues
• Optimizing bundle size or load times

Quick Reference

1. Async Patterns (CRITICAL)

references/async-patterns.md

• Prevent waterfall chains in API routes -- start promises early, await late
• Defer await until needed -- move await into branches that use it
• Dependency-based parallelization -- Promise.all() with .then() chaining
• Strategic Suspense boundaries -- stream content with <Suspense>

2. Bundle Optimization (CRITICAL)

references/bundle-optimization.md

• Avoid barrel file imports -- import directly from source files
• Conditional module loading -- load only when feature is activated
• Defer non-critical third-party libraries -- load after hydration
• Dynamic imports for heavy components -- next/dynamic with ssr: false
• Preload on user intent -- preload on hover/focus

3. Server-Side Performance (HIGH)

references/server-performance.md

• after() for non-blocking operations -- logging, analytics after response
• Authenticate Server Actions -- treat as public endpoints
• Cross-request LRU caching -- share data across sequential requests
• React.cache() deduplication -- per-request with primitive args
• Avoid duplicate RSC serialization -- transform in client, not server
• Parallel fetching via composition -- restructure component tree
• Minimize serialization at boundaries -- pass only needed fields

4. Client-Side Patterns (MEDIUM-HIGH)

references/client-patterns.md

• Deduplicate global event listeners -- useSWRSubscription
• Version and minimize localStorage -- schema versioning, try-catch
• Passive event listeners -- { passive: true } for scroll performance
• SWR for automatic deduplication -- caching and revalidation