vibe.react-best-practiceslisted

# Vercel React Best Practices ## Pre-check (K1) > Is this a React/Next.js performance issue? Standard React patterns (useState, useEffect, components) don't need this skill. Activate only for performance optimization or code review. ## CRITICAL Gotchas ### Waterfall Elimination | Gotcha | Why Non-obvious | |--------|----------------| | **Sequential awaits** | `const a = await f1(); const b = await f2();` creates waterfall. Use `Promise.all([f1(), f2()])` for independent ops | | **Await placement** | Move `await` to the branch where value is actually used, not at declaration | | **Missing Suspense** | Wrap slow server components in `<Suspense>` to stream — don't block entire page | ### Bundle Size | Gotcha | Why Non-obvious | |--------|----------------| | **Barrel imports** | `import { Button } from "@/components"` pulls entire barrel. Use `import { Button } from "@/components/Button"` | | **Third-party in initial bundle** | Load analytics/logging AFTER hydration with `next/dynamic` or lazy `useEffect` | | **Heavy components** | Charts, editors, maps → `next/dynamic` with `{ ssr: false }` | ## HIGH Gotchas ### Server-side | Gotcha | Fix | |--------|-----| | Duplicate DB calls across server components | Wrap with `React.cache()` for per-request dedup | | Large data serialized to client | Pick only needed fields before passing to client components | | Blocking post-processing (logging, analytics) | Use `after()` for non-blocking tasks | ## MEDIUM Gotchas | Gotcha | F