Vercel React Best Practices

Overview

Comprehensive performance optimization guide for React and Next.js applications. Contains 57 rules across 8 categories, prioritized by impact to guide code generation and refactoring.

Core principle: Eliminate waterfalls, minimize bundle size, and optimize rendering - in that priority order.

When to Use

• •Writing new React components or Next.js pages
• •Implementing data fetching (client or server-side)
• •Reviewing code for performance issues
• •Refactoring existing React/Next.js code
• •Optimizing bundle size or load times

Quick Reference by Priority

1. Eliminating Waterfalls (CRITICAL)

Pattern - Parallel fetching:

// ❌ Sequential (waterfall)
const user = await getUser(id);
const posts = await getPosts(id);

// ✅ Parallel
const [user, posts] = await Promise.all([
  getUser(id),
  getPosts(id)
]);

2. Bundle Size Optimization (CRITICAL)

Pattern - Direct imports:

// ❌ Barrel import (pulls entire module)
import { Button } from '@/components';

// ✅ Direct import
import { Button } from '@/components/Button';

Pattern - Dynamic import:

// ❌ Static import of heavy component
import HeavyChart from './HeavyChart';

// ✅ Dynamic import
const HeavyChart = dynamic(() => import('./HeavyChart'), {
  loading: () => <ChartSkeleton />
});

3. Server-Side Performance (HIGH)

Pattern - React.cache for deduplication:

// ✅ Cached function - called multiple times, executes once per request
const getUser = cache(async (id: string) => {
  return await db.user.findUnique({ where: { id } });
});

4. Client-Side Data Fetching (MEDIUM-HIGH)

5. Re-render Optimization (MEDIUM)

Pattern - Functional setState:

// ❌ Creates new callback reference each render
const increment = () => setCount(count + 1);

// ✅ Stable callback, no dependency on count
const increment = useCallback(() => setCount(c => c + 1), []);

Pattern - Lazy state initialization:

// ❌ Expensive computation runs every render
const [data] = useState(expensiveComputation());

// ✅ Only runs once
const [data] = useState(() => expensiveComputation());

6. Rendering Performance (MEDIUM)

Pattern - Conditional rendering:

// ❌ Can render 0 or false
{count && <Component />}

// ✅ Always renders nothing or component
{count > 0 ? <Component /> : null}

7. JavaScript Performance (LOW-MEDIUM)

Pattern - Set for lookups:

// ❌ O(n) lookup
const isSelected = selectedIds.includes(id);

// ✅ O(1) lookup
const selectedSet = new Set(selectedIds);
const isSelected = selectedSet.has(id);

8. Advanced Patterns (LOW)

Red Flags

Watch for these anti-patterns during code review:

• •Sequential awaits for independent data fetches
• •Barrel file imports (import { x } from '@/components')
• •Large static imports for conditionally-used components
• •State subscriptions for values only used in callbacks
• •Array.includes() in loops (use Set instead)
• •useEffect for derived state (compute during render)
• •Non-primitive effect dependencies causing infinite loops

Supporting Files

• •AGENTS.md - Full compiled document with all 40+ rules expanded with detailed explanations and code examples
• •rules/*.md - Individual rule files for detailed reference (59 files)

References

• •Vercel Agent Skills Repository
• •React Documentation
• •Next.js Documentation
• •SWR Documentation