Vercel React Best Practices 是一份面向 React 与 Next.js 应用的综合性能优化指南，由 Vercel 维护，包含 45 条规则，分为 8 个类别，并按影响程度排序，可作为自动化重构和代码生成的参考依据。
用途 该技能在编写新 React 组件或 Next.js 页面、实现客户端或服务端数据获取、审查代码中的性能问题、重构现有 React/Next.js 代码、优化包体积或加载时间时使用。
主要能力（按优先级排序的规则类别）
- 消除请求瀑布（CRITICAL，前缀 async-）：将 await 移入实际使用的分支；独立操作使用 Promise.all()；用 better-all 处理部分依赖；API 路由中尽早启动 Promise、延后 await；使用 Suspense 流式输出内容。
- 包体积优化（CRITICAL，前缀 bundle-）：直接导入、避免 barrel 文件；对重型组件使用 next/dynamic；水合后再加载分析/日志；仅在功能激活时加载模块；在 hover/focus 时预加载以提升感知速度。
- 服务端性能（HIGH，前缀 server-）：用 React.cache() 做单请求去重；用 LRU 缓存做跨请求缓存；减少传给客户端组件的数据；重构组件以并行获取数据；用 after() 执行非阻塞操作。
- 客户端数据获取（MEDIUM-HIGH，前缀 client-）：用 SWR 自动去重请求；去重全局事件监听器。
- 重渲染优化（MEDIUM，前缀 rerender-）：不订阅仅在回调中使用的状态；将昂贵计算提取为记忆化组件；effect 中使用原始类型依赖；订阅派生布尔值而非原始值；使用函数式 setState 保持回调稳定；对昂贵初值向 useState 传函数；用 startTransition 处理非紧急更新。
- 渲染性能（MEDIUM，前缀 rendering-）：动画作用于 div 包装器而非 SVG 元素；长列表使用 content-visibility；将静态 JSX 提取到组件外；降低 SVG 坐标精度；仅客户端数据用内联脚本避免闪烁；用 Activity 组件控制显示/隐藏；条件渲染用三元而非 &&。
- JavaScript 性能（LOW-MEDIUM，前缀 js-）：通过类或 cssText 批量修改 CSS；为重复查找构建 Map；循环中缓存对象属性；在模块级 Map 中缓存函数结果；缓存 localStorage/sessionStorage 读取；合并多个 filter/map 为一次循环；昂贵比较前先检查数组长度；函数提前返回；将 RegExp 创建提到循环外；用循环求 min/max 而非排序；用 Set/Map 实现 O(1) 查找；用 toSorted() 保持不可变。
- 高级模式（LOW，前缀 advanced-）：将事件处理器存入 ref；用 useLatest 获得稳定的回调 ref。
使用方式 可阅读单条规则文件获取详细说明与代码示例，如 rules/async-parallel.md、rules/bundle-barrel-imports.md、rules/_sections.md。每个规则文件包含：为何重要的简要说明、附带解释的错误代码示例、附带解释的正确代码示例、以及补充上下文与参考。完整展开全部规则的指南见 AGENTS.md。
适用场景 适用于 React/Next.js 项目在开发、代码评审、性能调优和重构阶段的实践参考与自动化代码生成依据。
限制 资料未提供安装命令、运行环境要求、授权方式或版本信息，暂未提供。