react-best-practices

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

React Best Practices

React 最佳实践

Part of Agent Skills™ by googleadsagent.ai™

属于 Agent Skills™ 的一部分，由 googleadsagent.ai™ 提供

Description

描述

React Best Practices codifies 40+ rules across 8 priority categories, from Critical (eliminating waterfalls, reducing bundle size) to Low-Medium (JavaScript micro-optimizations). Each rule is actionable, includes a severity rating, and provides before/after code examples. The agent applies these rules automatically when writing or reviewing React code.

The rules are ordered by impact, not by ease of implementation. Eliminating client-server waterfalls and reducing bundle size yield the largest performance gains and therefore receive Critical priority. Server-side rendering performance and client data fetching patterns follow. Re-render optimization—often the first thing developers reach for—is rated Medium because it rarely causes measurable user-facing performance problems compared to network and bundle issues.

This skill treats React performance as a system property, not a component property. The highest-impact optimizations happen at the architecture level: where data is fetched, how bundles are split, and which rendering strategy is chosen. Component-level optimizations (memoization, key stability) are included but correctly deprioritized.

React 最佳实践将 40 多条规则归纳为 8 个优先级类别，从 Critical（消除瀑布式请求、减小 bundle 体积）到 Low-Medium（JavaScript 微优化）。每条规则均可直接执行，包含严重性评级，并提供优化前后的代码示例。该 Agent 会在编写或审查 React 代码时自动应用这些规则。

这些规则按影响程度而非实施难度排序。消除客户端与服务器之间的瀑布式请求以及减小 bundle 体积能带来最大的性能提升，因此被列为 Critical 优先级。其后依次是服务器端渲染性能和客户端数据获取模式。重新渲染优化——通常是开发者最先尝试的优化手段——被评为 Medium，因为与网络和 bundle 问题相比，它很少引发可测量的用户侧性能问题。

该 Skill 将 React 性能视为系统属性，而非组件属性。影响最大的优化发生在架构层面：数据从哪里获取、bundle 如何拆分，以及选择哪种渲染策略。组件级优化（memoization、key 稳定性）虽有涵盖，但会被恰当地降低优先级。

Use When

适用场景

Writing new React components or pages
Reviewing React code for performance issues
Debugging slow page loads or sluggish interactions
Optimizing Core Web Vitals (LCP, FID, CLS)
Migrating from client-side to server-side rendering
Reducing JavaScript bundle size

编写新的 React 组件或页面
审查 React 代码中的性能问题
排查页面加载缓慢或交互迟缓的问题
优化 Core Web Vitals（LCP、FID、CLS）
从客户端渲染迁移到服务器端渲染
减小 JavaScript bundle 体积

How It Works

工作方式

mermaid

graph TD
    A[React Code Change] --> B{Priority Scan}
    B --> C["🔴 Critical: Waterfalls"]
    B --> D["🔴 Critical: Bundle Size"]
    B --> E["🟠 High: Server Perf"]
    B --> F["🟡 Med-High: Client Fetch"]
    B --> G["🟡 Medium: Re-renders"]
    B --> H["🟡 Medium: Render Perf"]
    B --> I["🔵 Low-Med: Micro-opts"]
    C --> J[Apply Fixes by Priority]
    D --> J
    E --> J
    F --> J
    G --> J
    H --> J
    I --> J

Rules are evaluated in priority order. Critical issues are flagged as blockers; lower-priority items are noted as suggestions. The agent applies the highest-impact fixes first.

mermaid

graph TD
    A[React Code Change] --> B{Priority Scan}
    B --> C["🔴 Critical: Waterfalls"]
    B --> D["🔴 Critical: Bundle Size"]
    B --> E["🟠 High: Server Perf"]
    B --> F["🟡 Med-High: Client Fetch"]
    B --> G["🟡 Medium: Re-renders"]
    B --> H["🟡 Medium: Render Perf"]
    B --> I["🔵 Low-Med: Micro-opts"]
    C --> J[Apply Fixes by Priority]
    D --> J
    E --> J
    F --> J
    G --> J
    H --> J
    I --> J

规则会按优先级顺序进行评估。Critical 问题会被标记为阻断项；优先级较低的项目则作为建议指出。该 Agent 会优先应用影响最大的修复方案。

Implementation

实现

Critical: Eliminate Client-Server Waterfalls

Critical：消除客户端与服务器之间的瀑布式请求

tsx

// BAD: Sequential fetches create waterfalls
function Dashboard() {
  const user = use(fetchUser());         // 200ms
  const posts = use(fetchPosts(user.id)); // 200ms after user resolves
  const stats = use(fetchStats(user.id)); // 200ms after user resolves
  // Total: 600ms sequential
}

// GOOD: Parallel fetches with server components
async function Dashboard() {
  const user = await fetchUser();
  const [posts, stats] = await Promise.all([
    fetchPosts(user.id),
    fetchStats(user.id),
  ]);
  // Total: 400ms (user + parallel posts/stats)
}

tsx

// BAD: Sequential fetches create waterfalls
function Dashboard() {
  const user = use(fetchUser());         // 200ms
  const posts = use(fetchPosts(user.id)); // 200ms after user resolves
  const stats = use(fetchStats(user.id)); // 200ms after user resolves
  // Total: 600ms sequential
}

// GOOD: Parallel fetches with server components
async function Dashboard() {
  const user = await fetchUser();
  const [posts, stats] = await Promise.all([
    fetchPosts(user.id),
    fetchStats(user.id),
  ]);
  // Total: 400ms (user + parallel posts/stats)
}

Critical: Bundle Size Reduction

Critical：减小 Bundle 体积

tsx

// BAD: Import entire library
import { format } from "date-fns";

// GOOD: Tree-shakeable import
import { format } from "date-fns/format";

// BAD: Eager loading heavy components
import { HeavyChart } from "./HeavyChart";

// GOOD: Lazy loading with Suspense
const HeavyChart = lazy(() => import("./HeavyChart"));

tsx

// BAD: Import entire library
import { format } from "date-fns";

// GOOD: Tree-shakeable import
import { format } from "date-fns/format";

// BAD: Eager loading heavy components
import { HeavyChart } from "./HeavyChart";

// GOOD: Lazy loading with Suspense
const HeavyChart = lazy(() => import("./HeavyChart"));

Medium: Re-render Optimization

Medium：重新渲染优化

tsx

// BAD: New object reference every render
<UserContext.Provider value={{ user, theme, locale }}>

// GOOD: Stable reference with useMemo
const contextValue = useMemo(
  () => ({ user, theme, locale }),
  [user, theme, locale]
);
<UserContext.Provider value={contextValue}>

tsx

// BAD: New object reference every render
<UserContext.Provider value={{ user, theme, locale }}>

// GOOD: Stable reference with useMemo
const contextValue = useMemo(
  () => ({ user, theme, locale }),
  [user, theme, locale]
);
<UserContext.Provider value={contextValue}>

Best Practices

最佳实践

Fix Critical issues before optimizing Medium or Low items
Measure before optimizing—use React DevTools Profiler and Lighthouse
Prefer server components for data fetching; reserve client components for interactivity
Use
```
dynamic(() => import(...))
```
for any component not visible in the initial viewport
Avoid premature
```
useMemo
```
/
```
useCallback
```
—profile first to confirm the re-render is costly
Keep client component boundaries as narrow as possible to minimize hydration cost

优先修复 Critical 问题，再优化 Medium 或 Low 项目
先测量再优化——使用 React DevTools Profiler 和 Lighthouse
数据获取优先使用 Server Components；仅将 Client Components 用于交互
对初始视口中不可见的任何组件使用
```
dynamic(() => import(...))
```
避免过早使用
```
useMemo
```
/
```
useCallback
```
——先通过性能分析确认重新渲染成本是否高昂
尽可能缩小 Client Component 边界，以降低 hydration 成本

Platform Compatibility

平台兼容性

Platform	Support	Notes
Cursor	Full	Lint + review integration
VS Code	Full	ESLint plugin support
Windsurf	Full	React-aware analysis
Claude Code	Full	Code review application
Cline	Full	Rule-based review
aider	Partial	Manual rule application

平台	支持情况	备注
Cursor	完全支持	Lint + 审查集成
VS Code	完全支持	ESLint 插件支持
Windsurf	完全支持	React 感知分析
Claude Code	完全支持	代码审查应用
Cline	完全支持	基于规则的审查
aider	部分支持	手动应用规则

Related Skills

Keywords

关键词

react

performance

best-practices

bundle-size

waterfall-elimination

server-components

re-render-optimization

core-web-vitals

react

performance

best-practices

bundle-size

waterfall-elimination

server-components

re-render-optimization

core-web-vitals