Vercel React Best Practices

React and Next.js performance optimization guidelines maintained by Vercel Engineering, covering 70 rules organized into 8 priority-based categories.

When to Reference

Apply these guidelines when writing new components, implementing data fetching, reviewing performance, refactoring code, or optimizing bundle size and load times.

Key Categories

Critical Priority

Eliminating Waterfalls Address async bottlenecks like sequential awaits. Use Suspense for streaming. Parallelize data fetches where possible.

Bundle Size Optimization Use direct named imports, dynamic loading (next/dynamic), and conditional module loading to keep bundles lean.

High Priority

Server-Side Performance Leverage React.cache(), LRU caching, and parallel data fetching in server components. Avoid redundant DB calls by colocating queries.

Medium-High Priority

Client-Side Data Fetching Request deduplication via SWR or TanStack Query. Optimize event listener management. Avoid useEffect for data that can be fetched server-side.

Medium Priority

Re-render Optimization Apply useMemo, useCallback, and memo judiciously. Manage dependency arrays carefully. Use useTransition to defer expensive state updates.

Rendering Performance Optimize CSS for paint performance. Use content-visibility for off-screen content. Apply selective hydration strategies.

Lower Priority

JavaScript Performance Batch DOM updates. Cache repeated computations. Use efficient data structures for lookups.

Advanced Patterns Use event handler refs for stable callbacks. Apply initialization patterns that avoid unnecessary re-renders on mount.

Rule Format

Each rule includes:

• A description of the problem
• Incorrect code example
• Correct code example
• Additional context and links to deeper documentation

Installation

npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-best-practices

Mirrored from https://github.com/vercel-labs/agent-skills — original author: vercel-labs, license: MIT. This is an unclaimed mirror. Content and ownership transfer to the author when they claim this account.