# React Best Practices

React and Next.js performance optimization guidelines from Vercel Engineering.

- Repository: https://github.com/tech-leads-club/agent-skills (7121 stars)
- Category: DevOps
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add tech-leads-club/agent-skills --skill react-best-practices -g -a claude-code -y`
Codex: `npx skills add tech-leads-club/agent-skills --skill react-best-practices -g -a codex -y`
Cursor: `npx skills add tech-leads-club/agent-skills --skill react-best-practices -g -a cursor -y`
Gemini CLI: `npx skills add tech-leads-club/agent-skills --skill react-best-practices -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add tech-leads-club/agent-skills`

## Description

React and Next.js performance optimization guidelines from Vercel Engineering. Use when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements. Do NOT use for component API architecture or composition patterns (use react-composition-patterns instead).

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Vercel React Best Practices

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

## When to Apply

Reference these guidelines when:

- 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

## Rule Categories by Priority

| Priority | Category                  | Impact      | Prefix       |
| -------- | ------------------------- | ----------- | ------------ |
| 1        | Eliminating Waterfalls    | CRITICAL    | `async-`     |
| 2        | Bundle Size Optimization  | CRITICAL    | `bundle-`    |
| 3        | Server-Side Performance   | HIGH        | `server-`    |
| 4        | Client-Side Data Fetching | MEDIUM-HIGH | `client-`    |
| 5        | Re-render Optimization    | MEDIUM      | `rerender-`  |
| 6        | Rendering Performance     | MEDIUM      | `rendering-` |
| 7        | JavaScript Performance    | LOW-MEDIUM  | `js-`        |
| 8        | Advanced Patterns         | LOW         | `advanced-`  |

## Quick Reference

### 1. Eliminating Waterfalls (CRITICAL)

- `async-defer-await` - Move await into branches where actually used
- `async-parallel` - Use Promise.all() for independent operations
- `async-dependencies` - Use better-all for partial dependencies
- `async-api-routes` - Start promises early, await late in API routes
- `async-suspense-boundaries` - Use Suspense to stream content

### 2. Bundle Size Optimization (CRITICAL)

The rest: https://github.com/tech-leads-club/agent-skills/blob/HEAD/packages/skills-catalog/skills/(quality)/react-best-practices/SKILL.md