vercel-react-best-practices

name	vercel-react-best-practices
description	Use when: write or review React/Next.js code for performance — waterfalls, re-renders, bundle size.

Goal: production-quality React, not just code that renders.

Use for:

• slow pages, janky interactions, or large bundles
• reviewing components for performance regressions
• deciding when memoization actually helps

Workflow:

1. Find data-fetching waterfalls; parallelize independent requests.
2. Move work to the server; keep client components minimal.
3. Measure before memoizing; add useMemo/useCallback/memo only with cause.
4. Audit bundle: drop barrel imports and heavy client-only libraries.
5. Stabilize props and keys to avoid needless re-renders.
6. Verify with a profiler and bundle analysis, not intuition.

High-impact rules:

• fetch in parallel, not in nested awaits
• prefer server components; mark client boundaries narrowly
• lazy-load heavy, below-the-fold, or rarely-used code
• lift state only as high as it needs to go

Rules:

• measure before and after every optimization
• do not memoize cheap renders; it adds cost and noise
• keep client/server boundaries explicit and small
• correctness first; optimize the real bottleneck only