vercel-react-best-practiceslisted

> **⚠️ Web React / Next.js only.** React Native(Expo)면 `react-native-skills`, > ReactLynx면 `reactlynx-best-practices`, Vanilla Lynx(Element PAPI)면 > `vanilla-lynx`를 쓰세요. 네 팩은 혼용하지 않습니다. > 어느 팩인지는 저장소 의존성으로 판별합니다 — `react` + `next` / `react-dom`. <!-- vendored:begin --> # Vercel React Best Practices Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains 70 rules across 8 categories, 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 ## Rule Categories by Priority | Priority | Category | Impact | Prefix | |----------|----------|--------|--------| | 1 | Eliminating Waterfalls | CRITICAL | `async-` | | 2 | Bundle Size Optimization | CRITICAL | `bundle-` | | 3 | Server-Side Performance | HIGH | `server-` | | 4 | Client-Side Data Fetching | MEDIUM-HIGH | `client-` | | 5 | Re-render Optimization | MEDIUM | `rerender-` | | 6 | Rendering Performance | MEDIUM | `rendering-` | | 7 | JavaScript Performance | LOW-MEDIUM | `js-` | | 8 | Advanced Patterns | LOW | `advanced-` | ## Quick Reference ### 1. Eliminating Waterfalls (CRITICAL) - `async-cheap-condition-before-await` - Check cheap sync conditions before awaiting flags or remote v