AgentSkillsCN

react-best-practices

Vercel 工程团队提供的 React 和 Next.js 性能优化指南。适用于编写、审查或重构 React/Next.js 代码时使用。当涉及 React 组件、Next.js 页面、数据获取、包体积优化，或性能提升相关任务时，该技能将自动触发。

SKILL.md
--- frontmatter
name: react-best-practices
description: React and Next.js performance optimization guidelines from Vercel Engineering. Use when writing, reviewing, or refactoring React/Next.js code. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

React Best Practices

Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains 45 rules across 8 categories, prioritized by impact.

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

PriorityCategoryImpactPrefix
1Eliminating WaterfallsCRITICALasync-
2Bundle Size OptimizationCRITICALbundle-
3Server-Side PerformanceHIGHserver-
4Client-Side Data FetchingMEDIUM-HIGHclient-
5Re-render OptimizationMEDIUMrerender-
6Rendering PerformanceMEDIUMrendering-
7JavaScript PerformanceLOW-MEDIUMjs-
8Advanced PatternsLOWadvanced-

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-suspense-boundaries - Use Suspense to stream content

2. Bundle Size Optimization (CRITICAL)

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

3. Server-Side Performance (HIGH)

  • •server-cache-react - Use React.cache() for per-request deduplication
  • •server-serialization - Minimize data passed to client components
  • •server-parallel-fetching - Restructure components to parallelize fetches

4-5. Client & Re-render Optimization (MEDIUM)

  • •rerender-defer-reads - Don't subscribe to state only used in callbacks
  • •rerender-functional-setstate - Use functional setState for stable callbacks
  • •rerender-transitions - Use startTransition for non-urgent updates

6. Rendering Performance (MEDIUM)

  • •rendering-animate-svg-wrapper - Animate div wrapper, not SVG element
  • •rendering-content-visibility - Use content-visibility for long lists
  • •rendering-hoist-jsx - Extract static JSX outside components

7. JavaScript Performance (LOW-MEDIUM)

  • •js-index-maps - Build Map for repeated lookups
  • •js-set-map-lookups - Use Set/Map for O(1) lookups
  • •js-tosorted-immutable - Use toSorted() for immutability

Full Compiled Document

For the complete guide with all rules expanded: AGENTS.md