# Vercel React Best Practices

> Use when: write or review React/Next.js code for performance — waterfalls, re-renders, bundle size.

- Skill: `kimtth/vercel-react-best-practices` (Agent Skill)
- Install (CLI): `npx skillmds@latest add kimtth/vercel-react-best-practices`
- Raw SKILL.md: https://api.skillmd.com/api/skills/kimtth/vercel-react-best-practices/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: kimtth (https://skillmd.com/u/kimtth)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/kimtth/vercel-react-best-practices

---


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