react-best-practiceslisted

# 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-Im