react-best-practices

# React Best Practices ## Overview Comprehensive performance optimization guide for React and Next.js applications, containing 40+ rules across 8 categories. Rules are prioritized by impact to guide automated refactoring and code generation. ## When to Apply Reference these guidelines when: - Writing new React components or Next.js pages - Implementing data fetching (client or server-side) - Reviewing code for performance issues - Refactoring existing React/Next.js code - Optimizing bundle size or load times ## Priority-Ordered Guidelines Rules are prioritized by impact: | Priority | Category | Impact | |----------|----------|--------| | 1 | Eliminating Waterfalls | CRITICAL | | 2 | Bundle Size Optimization | CRITICAL | | 3 | Server-Side Performance | HIGH | | 4 | Client-Side Data Fetching | MEDIUM-HIGH | | 5 | Re-render Optimization | MEDIUM | | 6 | Rendering Performance | MEDIUM | | 7 | JavaScript Performance | LOW-MEDIUM | | 8 | Advanced Patterns | LOW | ## Quick Reference ### Critical Patterns (Apply First) **Eliminate Waterfalls:** - Defer await until needed (move into branches) - Use `Promise.all()` for independent async operations - Start promises early, await late - Use `better-all` for partial dependencies - Use Suspense boundaries to stream content **Reduce Bundle Size:** - Avoid barrel file imports (import directly from source) - Use `next/dynamic` for heavy components - Defer non-critical third-party libraries - Preload based on user intent ### High-Impact Server Patterns - Use `React.cache()` for per-request deduplication - Use LRU cache for cross-request caching - Minimize serialization at RSC boundaries - Parallelize data fetching with component composition ### Medium-Impact Client Patterns - Use SWR for automatic request deduplication - Defer state reads to usage point - Use lazy state initialization for expensive values - Use derived state subscriptions - Apply `startTransition` for non-urgent updates ### Rendering Patterns - Animate SVG wrappers, not SVG elements directly - Use `content-visibility: auto` for long lists - Prevent hydration mismatch with inline scripts - Use explicit conditional rendering (`? :` not `&&`) ### JavaScript Patterns - Batch DOM CSS changes via classes - Build index maps for repeated lookups - Cache repeated function calls - Use `toSorted()` instead of `sort()` for immutability - Early length check for array comparisons ## References Full documentation with code examples is available in: - `references/react-performance-guidelines.md` - Complete guide with all patterns To look up a specific pattern, grep the references: ``` grep -l "suspense" references/ grep -l "barrel" references/ grep -l "swr" references/ ```