react-review

来自Vercel Engineering的React与Next.js性能优化指南。涵盖8个类别下的45+条规则。

SKILL.md

--- frontmatter

name: react-review
description: React and Next.js performance optimization guidelines from Vercel Engineering. Contains 45+ rules across 8 categories.

Vercel React Best Practices

Quick reference for reviewing React code. For detailed rules with code examples, see RULES.md.

Rule Categories (by priority)

Priority	Category	Impact
1	Eliminating Waterfalls	CRITICAL
2	Bundle Size Optimization	CRITICAL
3	Server-Side Performance	HIGH
4	Client-Side Data Fetching	MEDIUM-HIGH
5	Re-render Optimization	MEDIUM
6	Rendering Performance	MEDIUM
7	JavaScript Performance	LOW-MEDIUM
8	Advanced Patterns	LOW

Critical Rules Summary

Eliminating Waterfalls

•async-parallel - Use Promise.all() for independent operations
•async-defer-await - Move await into branches where actually used
•async-suspense-boundaries - Use Suspense to stream content

Bundle Size

•bundle-barrel-imports - Import directly, avoid barrel files
•bundle-dynamic-imports - Use next/dynamic for heavy components
•bundle-defer-third-party - Load analytics after hydration

Re-render Optimization

•rerender-memo - Extract expensive work into memoized components
•rerender-functional-setstate - Use functional setState for stable callbacks
•rerender-lazy-state-init - Pass function to useState for expensive values

Common Patterns

•rendering-conditional-render - Use ternary, not && for conditionals with numbers
•Missing keys in list rendering
•Index as key for dynamic lists