Vercel React Best Practices

Problem to Solve

Performance issues in React and Next.js applications are usually systemic rather than caused by one slow algorithm: serialized requests, third-party scripts loading too early, duplicated server-side computation, overly broad client state subscriptions, and unnecessary re-renders. Code generation without these constraints can produce code that runs but is hard to ship.

How the Skill Works

The skill organizes Vercel guidance into 8 priority categories and 45 rules, each with a name, impact scope, and actionable pattern:
- Critical path: address async- and bundle- rules first, such as using Promise.all() for independent requests, next/dynamic for heavy components, and avoiding barrel imports.
- Server and client: use React.cache(), SWR, minimized serialization, and event-listener deduplication to reduce duplicate computation and repeated requests.
- Rendering and JS details: use startTransition, functional setState, Set/Map lookups, and loop merging to lower re-render and hot-path cost.
In practice, classify the issue first, then select rules by prefixes such as async-, bundle-, server-, client-, and rerender-, and compare incorrect and correct examples during review or generation.

Boundaries

It is focused on React/Next.js web performance optimization and does not replace testing, accessibility, business modeling, or operational monitoring. Some rules depend on Next.js APIs such as after() and next/dynamic, so pure React or other SSR setups should adapt them to the available runtime.