vercel-react-best-practices

Vercel React Best Practices

Skill Overview

Vercel React Best Practices is a comprehensive performance optimization guide for React and Next.js applications, maintained by the Vercel engineering team. It includes 45 priority-sorted optimization rules to help developers write faster React code.

Use Cases

1. Writing and Reviewing Code

When creating new React components or Next.js pages, automatically apply the best-practice patterns. During code reviews, quickly identify performance hazards and anti-patterns to ensure consistent code quality across the team.

2. Diagnosing Performance Bottlenecks

When the app is slow to load, stutters, or has an overly large bundle, use the rules list to quickly pinpoint the root cause and get targeted solutions and code examples.

3. Progressive Optimization Refactoring

Optimize existing projects step by step based on priority (Critical/High/Medium). Start by eliminating waterfall requests and reducing the bundle size, then go deeper into re-render optimizations and JavaScript performance tuning.

Core Features

1. 45 Categorized Optimization Rules

Covers eight major categories: eliminating waterfall requests, bundle optimization, server performance, client data fetching, re-render optimization, rendering performance, JavaScript performance, and advanced patterns. Each rule includes an incorrect example, a correct example, and an explanation of the underlying principle.

2. Priority-Driven Execution

Rules are labeled as CRITICAL/HIGH/MEDIUM/LOW based on their impact, helping developers prioritize the most critical performance issues. For example, async-parallel (parallel requests) and bundle-barrel-imports (direct imports) are marked as CRITICAL and should be handled first.

3. Complete Before/After Code Comparisons

Each rule provides before/after code comparisons, clearly showing the problematic pattern and the correct approach. For example, async-defer-await shows how to move await into the branch where it is actually needed to avoid blocking unrelated code; bundle-dynamic-imports demonstrates using next/dynamic to load heavy components only when needed.

Common Questions

When does a React component need to be wrapped with memo?

When a component’s render cost is high and it frequently ends up with “invalid” updates due to re-renders from its parent. For example, complex calculations, large list items, or components that include expensive operations. However, note that memo isn’t a cure-all—wrapping simple components may add overhead.

How can Next.js avoid the data request waterfall effect?

Fetch independent data in parallel using Promise.all instead of sequential await. In server components, deduplicate identical requests with React.cache, and use Suspense boundaries for streaming rendering. For API routes, start the Promise as early as possible and await only when needed.

How do you detect how many times a React component re-renders?

You can use React DevTools’ Profiler feature, or add console.log in a development environment to observe render frequency. A more systematic method is to use the rerender-defer-reads rule to check whether you’re subscribing to state that’s only used in callbacks, and to use rerender-derived-state to check whether you can subscribe to derived boolean values instead of the original values.

Which frameworks does this skill apply to?

Currently, it focuses on React and Next.js. The server performance section in the rules is specifically tailored for Next.js App Router server components and API routes. The client data fetching rules apply to any React app, but the SWR recommendation fits best with the Vercel ecosystem.

Which priority level should optimization start with?

It’s recommended to begin with CRITICAL, especially async-parallel (parallel requests) and bundle-barrel-imports (direct imports). These issues have the most direct impact and the most obvious optimization payoff. After that, select HIGH or MEDIUM rules based on the actual performance bottlenecks.