review-react-best-practices

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

React Best Practices Review (Performance-First)

React最佳实践审查（性能优先）

Use this skill to turn “React feels slow / Next.js page is heavy / too many requests” into a repeatable, prioritized review.

This skill is intentionally built like a rule library:

```
SKILL.md
```
: how to review + how to search rules
```
references/rules/*
```
: one rule per file (taggable, sortable, easy to evolve)

使用此技能将“React运行缓慢 / Next.js页面加载过重 / 请求过多”这类问题转化为可重复、按优先级排序的审查流程。

本技能被设计为规则库形式：

```
SKILL.md
```
：审查方法 + 规则检索方式
```
references/rules/*
```
：每个规则对应一个文件（可打标签、排序、便于迭代）

When to apply

适用场景

Use when:

Building or refactoring React components
Working in Next.js (App Router) on RSC boundaries, Server Actions, data fetching
Reviewing PRs for performance regressions
Bundle size increases / slow HMR / cold start issues
UI jank / unnecessary re-renders / hydration issues

适用于以下情况：

构建或重构React组件
基于Next.js（App Router）开发RSC边界、Server Actions、数据获取逻辑
审查PR以排查性能退化问题
包体积增大 / HMR缓慢 / 冷启动问题
UI卡顿 / 不必要的重渲染 / 水合问题

Review method (prioritized)

审查方法（按优先级排序）

Start with CRITICAL rules first (waterfalls + bundle).
Only then go to HIGH (server patterns + serialization).
Then MEDIUM (re-render + rendering).
Then LOW-MEDIUM micro-optimizations (JS hot paths).

Section ordering lives in:

references/rules/_sections.md

先处理CRITICAL（关键）规则（请求瀑布 + 包体积相关）。
再处理HIGH（高优先级）规则（服务端模式 + 序列化相关）。
接着处理MEDIUM（中等优先级）规则（重渲染 + 渲染机制相关）。
最后处理LOW-MEDIUM（中低优先级）规则：微优化（JS热路径）。

章节排序定义在：

references/rules/_sections.md

How to use the rules efficiently

高效使用规则的方法

Search by keyword

按关键词检索

bash

rg -n "waterfall|Promise\\.all|defer await" references/rules
rg -n "barrel|optimizePackageImports|dynamic" references/rules
rg -n "cache\\(|React\\.cache|serialization|RSC" references/rules
rg -n "memo\\(|useMemo|useCallback|dependencies" references/rules

bash

rg -n "waterfall|Promise\\.all|defer await" references/rules
rg -n "barrel|optimizePackageImports|dynamic" references/rules
rg -n "cache\\(|React\\.cache|serialization|RSC" references/rules
rg -n "memo\\(|useMemo|useCallback|dependencies" references/rules

Search by tag

按标签检索

Each rule has

tags:

in YAML frontmatter.

bash

rg -n "tags:.*bundle" references/rules
rg -n "tags:.*rerender" references/rules

每个规则的YAML前置元数据中包含

tags:

字段。

bash

rg -n "tags:.*bundle" references/rules
rg -n "tags:.*rerender" references/rules

Output format (recommended)

推荐输出格式

When reviewing code, output:

Summary (1 paragraph)
Critical fixes (must-fix, biggest wins)
High impact (should-fix)
Medium / Low (nice-to-have)

For each issue include:

Rule name (and file under
```
references/rules/
```
)
Location (
```
path:line
```
)
Why it matters (latency / bundle / CPU / UX)
Minimal fix direction (prefer small diffs)

If running in a Ship Faster run directory, persist the report to:

run_dir/evidence/react-best-practices-review.md

审查代码时，建议输出以下内容：

摘要（1段文字）
关键修复项（必须修复，收益最大）
高影响修复项（建议修复）
中/低优先级修复项（锦上添花）

每个问题需包含：

规则名称（及
```
references/rules/
```
下对应文件）
位置（
```
路径:行号
```
）
影响原因（延迟 / 包体积 / CPU / 用户体验）
最小修复方向（优先小改动）

若在Ship Faster运行目录中执行，可将报告保存至：

run_dir/evidence/react-best-practices-review.md

Rule library

规则库

Rules live in:

```
references/rules/
```
Rule template:
```
references/rules/_template.md
```

规则存储于：

```
references/rules/
```
规则模板：
```
references/rules/_template.md
```