vercel-react-best-practices by vercel-labs/agent-skills
npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-best-practices由 Vercel 维护的 React 和 Next.js 应用程序综合性能优化指南。包含 8 个类别共 58 条规则,按影响优先级排序,以指导自动化重构和代码生成。
在以下情况下参考这些指南:
| 优先级 | 类别 | 影响 | 前缀 |
|---|---|---|---|
| 1 | 消除瀑布流 | 关键 | async- |
| 2 | 包大小优化 | 关键 | bundle- |
| 3 | 服务器端性能 | 高 |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
server-| 4 | 客户端数据获取 | 中高 | client- |
| 5 | 重新渲染优化 | 中 | rerender- |
| 6 | 渲染性能 | 中 | rendering- |
| 7 | JavaScript 性能 | 低中 | js- |
| 8 | 高级模式 | 低 | advanced- |
async-defer-await - 将 await 移动到实际使用的分支中async-parallel - 对独立操作使用 Promise.all()async-dependencies - 对部分依赖项使用 better-allasync-api-routes - 在 API 路由中尽早启动 Promise,稍后 awaitasync-suspense-boundaries - 使用 Suspense 流式传输内容bundle-barrel-imports - 直接导入,避免使用桶文件bundle-dynamic-imports - 对重型组件使用 next/dynamicbundle-defer-third-party - 在 hydration 后加载分析/日志记录bundle-conditional - 仅在功能激活时加载模块bundle-preload - 在悬停/聚焦时预加载以提高感知速度server-auth-actions - 像 API 路由一样验证服务器操作server-cache-react - 使用 React.cache() 进行请求级去重server-cache-lru - 使用 LRU 缓存进行跨请求缓存server-dedup-props - 避免在 RSC props 中重复序列化server-hoist-static-io - 将静态 I/O(字体、徽标)提升到模块级别server-serialization - 最小化传递给客户端组件的数据server-parallel-fetching - 重构组件以实现并行获取server-after-nonblocking - 对非阻塞操作使用 after()client-swr-dedup - 使用 SWR 实现自动请求去重client-event-listeners - 对全局事件监听器进行去重client-passive-event-listeners - 对滚动使用被动监听器client-localstorage-schema - 对 localStorage 数据进行版本控制和最小化rerender-defer-reads - 不要订阅仅在回调中使用的状态rerender-memo - 将昂贵的工作提取到记忆化组件中rerender-memo-with-default-value - 提升默认的非原始 propsrerender-dependencies - 在 effects 中使用原始依赖项rerender-derived-state - 订阅派生的布尔值,而非原始值rerender-derived-state-no-effect - 在渲染期间派生状态,而非在 effects 中rerender-functional-setstate - 使用函数式 setState 以获得稳定的回调rerender-lazy-state-init - 将函数传递给 useState 以处理昂贵的值rerender-simple-expression-in-memo - 避免对简单原始值使用 memorerender-move-effect-to-event - 将交互逻辑放在事件处理程序中rerender-transitions - 对非紧急更新使用 startTransitionrerender-use-ref-transient-values - 使用 refs 处理瞬态频繁变化的值rendering-animate-svg-wrapper - 对 div 包装器进行动画处理,而非 SVG 元素rendering-content-visibility - 对长列表使用 content-visibilityrendering-hoist-jsx - 将静态 JSX 提取到组件外部rendering-svg-precision - 降低 SVG 坐标精度rendering-hydration-no-flicker - 对仅客户端数据使用内联脚本rendering-hydration-suppress-warning - 抑制预期的失配警告rendering-activity - 使用 Activity 组件进行显示/隐藏rendering-conditional-render - 使用三元运算符,而非 && 进行条件渲染rendering-usetransition-loading - 对加载状态优先使用 useTransitionjs-batch-dom-css - 通过类或 cssText 分组 CSS 更改js-index-maps - 为重复查找构建 Mapjs-cache-property-access - 在循环中缓存对象属性js-cache-function-results - 在模块级 Map 中缓存函数结果js-cache-storage - 缓存 localStorage/sessionStorage 读取js-combine-iterations - 将多个 filter/map 合并到一个循环中js-length-check-first - 在进行昂贵比较之前检查数组长度js-early-exit - 尽早从函数返回js-hoist-regexp - 将 RegExp 创建提升到循环外部js-min-max-loop - 使用循环求最小/最大值,而非 sortjs-set-map-lookups - 使用 Set/Map 进行 O(1) 查找js-tosorted-immutable - 使用 toSorted() 实现不可变性advanced-event-handler-refs - 将事件处理程序存储在 refs 中advanced-init-once - 每次应用加载时初始化一次应用advanced-use-latest - 使用 useLatest 获得稳定的回调 refs阅读单个规则文件以获取详细解释和代码示例:
rules/async-parallel.md
rules/bundle-barrel-imports.md
每个规则文件包含:
包含所有规则详解的完整指南:AGENTS.md
每周安装量
186.9K
仓库
GitHub 星标数
22.4K
首次出现
2026 年 1 月 19 日
安全审计
安装于
opencode127.9K
gemini-cli125.7K
codex124.5K
github-copilot114.5K
claude-code108.9K
cursor107.8K
Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains 58 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.
Reference these guidelines when:
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Eliminating Waterfalls | CRITICAL | async- |
| 2 | Bundle Size Optimization | CRITICAL | bundle- |
| 3 | Server-Side Performance | HIGH | server- |
| 4 | Client-Side Data Fetching | MEDIUM-HIGH | client- |
| 5 | Re-render Optimization | MEDIUM | rerender- |
| 6 | Rendering Performance | MEDIUM | rendering- |
| 7 | JavaScript Performance | LOW-MEDIUM | js- |
| 8 | Advanced Patterns | LOW | advanced- |
async-defer-await - Move await into branches where actually usedasync-parallel - Use Promise.all() for independent operationsasync-dependencies - Use better-all for partial dependenciesasync-api-routes - Start promises early, await late in API routesasync-suspense-boundaries - Use Suspense to stream contentbundle-barrel-imports - Import directly, avoid barrel filesbundle-dynamic-imports - Use next/dynamic for heavy componentsbundle-defer-third-party - Load analytics/logging after hydrationbundle-conditional - Load modules only when feature is activatedbundle-preload - Preload on hover/focus for perceived speedserver-auth-actions - Authenticate server actions like API routesserver-cache-react - Use React.cache() for per-request deduplicationserver-cache-lru - Use LRU cache for cross-request cachingserver-dedup-props - Avoid duplicate serialization in RSC propsserver-hoist-static-io - Hoist static I/O (fonts, logos) to module levelserver-serialization - Minimize data passed to client componentsserver-parallel-fetching - Restructure components to parallelize fetchesserver-after-nonblocking - Use after() for non-blocking operationsclient-swr-dedup - Use SWR for automatic request deduplicationclient-event-listeners - Deduplicate global event listenersclient-passive-event-listeners - Use passive listeners for scrollclient-localstorage-schema - Version and minimize localStorage datarerender-defer-reads - Don't subscribe to state only used in callbacksrerender-memo - Extract expensive work into memoized componentsrerender-memo-with-default-value - Hoist default non-primitive propsrerender-dependencies - Use primitive dependencies in effectsrerender-derived-state - Subscribe to derived booleans, not raw valuesrerender-derived-state-no-effect - Derive state during render, not effectsrerender-functional-setstate - Use functional setState for stable callbacksrerender-lazy-state-init - Pass function to useState for expensive valuesrerender-simple-expression-in-memo - Avoid memo for simple primitivesrendering-animate-svg-wrapper - Animate div wrapper, not SVG elementrendering-content-visibility - Use content-visibility for long listsrendering-hoist-jsx - Extract static JSX outside componentsrendering-svg-precision - Reduce SVG coordinate precisionrendering-hydration-no-flicker - Use inline script for client-only datarendering-hydration-suppress-warning - Suppress expected mismatchesrendering-activity - Use Activity component for show/hiderendering-conditional-render - Use ternary, not && for conditionalsrendering-usetransition-loading - Prefer useTransition for loading statejs-batch-dom-css - Group CSS changes via classes or cssTextjs-index-maps - Build Map for repeated lookupsjs-cache-property-access - Cache object properties in loopsjs-cache-function-results - Cache function results in module-level Mapjs-cache-storage - Cache localStorage/sessionStorage readsjs-combine-iterations - Combine multiple filter/map into one loopjs-length-check-first - Check array length before expensive comparisonjs-early-exit - Return early from functionsjs-hoist-regexp - Hoist RegExp creation outside loopsadvanced-event-handler-refs - Store event handlers in refsadvanced-init-once - Initialize app once per app loadadvanced-use-latest - useLatest for stable callback refsRead individual rule files for detailed explanations and code examples:
rules/async-parallel.md
rules/bundle-barrel-imports.md
Each rule file contains:
For the complete guide with all rules expanded: AGENTS.md
Weekly Installs
186.9K
Repository
GitHub Stars
22.4K
First Seen
Jan 19, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode127.9K
gemini-cli125.7K
codex124.5K
github-copilot114.5K
claude-code108.9K
cursor107.8K
76,500 周安装
rerender-move-effect-to-event - Put interaction logic in event handlersrerender-transitions - Use startTransition for non-urgent updatesrerender-use-ref-transient-values - Use refs for transient frequent valuesjs-min-max-loop - Use loop for min/max instead of sortjs-set-map-lookups - Use Set/Map for O(1) lookupsjs-tosorted-immutable - Use toSorted() for immutability