npx skills add https://github.com/dalestudy/skills --skill react基于 Vercel 指南的 React 性能优化最佳实践。框架无关（适用于 Next.js、Remix、Vite 等）。
每个规则的详细说明和代码示例，请参阅 references/。原始 Vercel 指南的完整规则（包含 Next.js/SSR）请参阅 vercel-react-best-practices。
| 优先级 | 类别 | 影响度 | 前缀 |
|---|---|---|---|
| 1 | 消除异步瀑布流 | CRITICAL | async- |
| 2 | 打包体积优化 | CRITICAL | bundle- |
| 3 | 重渲染优化 | MEDIUM | rerender- |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者，精准高效
| 4 | 渲染性能 | MEDIUM | rendering- |
| 5 | 客户端数据/事件 | MEDIUM | client- |
| 6 | JavaScript 性能 | LOW-MEDIUM | js- |
| 7 | 高级模式 | LOW | advanced- |
async-parallel - 使用 Promise.all() 并行化独立任务async-defer-await - 在非必要路径上延迟 awaitasync-suspense-boundaries - 使用 Suspense 进行部分渲染async-dependencies - 对具有部分依赖关系的任务进行最大并行化bundle-barrel-imports - 避免直接导入 barrel 文件bundle-lazy - 使用 React.lazy 进行代码分割bundle-preload - 在 hover/focus 时预加载bundle-conditional - 仅在功能启用时加载模块bundle-defer-third-party - 非必需第三方库在 hydration 后加载rerender-functional-setstate - 使用函数式 setState 获得稳定回调rerender-lazy-state-init - 延迟初始化开销大的初始值rerender-derived-state - 订阅派生的布尔值rerender-dependencies - 缩小 Effect 依赖项rerender-memo - 使用 memo 分离开销大的操作rerender-transitions - 使用 startTransition 保持 UI 响应性rerender-ref-callbacks - 使用 ref callback 访问 DOM（替代 useRef+useEffect）rerender-avoid-usestate - 判断何时替代 useState 的指南rerender-url-state - 使用 URL 查询参数管理状态rerender-form-libraries - 使用表单库替代 useStatererender-discriminated-union - 使用 discriminated union 防止不可能的状态rerender-use-reducer - 使用 useReducer 处理复杂状态转换rerender-derived-state-no-effect - 在渲染期间计算派生状态rerender-defer-reads - 将状态读取延迟到使用时刻rerender-memo-with-default-value - 提取 memo 组件的默认值为常量rerender-move-effect-to-event - 将交互逻辑移至事件处理器rerender-simple-expression-in-memo - 禁止对简单表达式使用 useMemorerender-use-ref-transient-values - 对临时值使用 useRefrerender-simplify-useeffect - 将 useEffect 简化为自定义 Hookrendering-animate-svg-wrapper - 使用 SVG 包装器实现 GPU 加速rendering-content-visibility - 优化长列表的离屏渲染rendering-hoist-jsx - 提升静态 JSXrendering-conditional-render - 使用三元运算符防止 falsy 值导致的 bugrendering-hydration-no-flicker - 无 hydration 不匹配的防闪烁rendering-activity - 使用 Activity/CSS 保留状态/DOMrendering-svg-precision - 减少 SVG 坐标精度（使用 SVGO）rendering-usetransition-loading - 使用 useTransition 替代手动加载状态rendering-inp-css-feedback - 使用 CSS :active + yield 改进 INPrendering-composition-vs-early-return - Composition 与 Early Return 的选择标准client-passive-event-listeners - 使用 passive 消除滚动延迟client-localstorage-schema - localStorage 版本管理client-sync-external-store - 使用 useSyncExternalStore 订阅浏览器 API/外部存储client-event-listeners - 消除全局事件监听器重复client-data-dedup - 使用 TanStack Query/SWR 消除数据获取重复client-abort-redundant-work - 使用 AbortController 取消不必要的异步任务js-index-maps - 使用 Map 实现 O(1) 查找js-tosorted-immutable - 使用 toSorted() 保持不可变性js-set-map-lookups - 使用 Set 实现 O(1) 成员检查js-early-exit - 通过提前返回来避免不必要处理js-batch-dom-css - 分离 DOM 读写以防止布局抖动js-cache-function-results - 在模块级别缓存重复函数调用结果js-cache-property-access - 缓存循环内的属性访问js-cache-storage - 对 localStorage/cookie 读取进行内存缓存js-combine-iterations - 将多个数组遍历合并为单次循环js-hoist-regexp - 将 RegExp 提升到模块作用域js-length-check-first - 比较数组时先检查长度js-min-max-loop - 使用单次循环而非排序来求 min/maxjs-iterator-helpers - 使用 Iterator Helper 进行惰性处理advanced-event-handler-refs - 将事件处理器存储在 ref 中（防止重复订阅）advanced-use-latest - 使用 useEffectEvent/useLatest 获得稳定的回调引用advanced-init-once - 在模块级别而非组件内进行应用初始化advanced-closure-scope - 通过隔离闭包作用域防止内存泄漏此技能仅包含框架无关规则。Next.js/SSR 专用规则请参阅原始指南：
| 规则 | 影响度 | 描述 |
|---|---|---|
server-cache-react | MEDIUM | 使用 React.cache() 消除请求内重复 |
server-cache-lru | HIGH | 使用 LRU 缓存进行请求间缓存 |
server-serialization | HIGH | 在 RSC 边界最小化序列化 |
server-parallel-fetching | CRITICAL | 通过组件组合实现服务器数据并行获取 |
server-after-nonblocking | MEDIUM | 使用 after() 进行非阻塞后处理 |
server-auth-actions | MEDIUM | 服务器操作身份验证验证 |
server-dedup-props | LOW | 消除重复 props |
bundle-dynamic-imports | CRITICAL | 使用 next/dynamic 进行动态导入 |
rendering-hydration-suppress-warning | LOW | 使用 suppressHydrationWarning |
async-api-routes | MEDIUM | API 路由异步模式 |
memo()、useMemo()每周安装数
51
仓库
GitHub 星标数
4
首次出现
Feb 20, 2026
安全审计
安装于
opencode50
claude-code50
github-copilot50
codex50
kimi-cli50
gemini-cli50
Vercel 가이드 기반 React 성능 최적화 베스트 프랙티스. 프레임워크 비종속(Next.js, Remix, Vite 등 무관).
각 규칙의 상세 설명과 코드 예제는 references/ 참고. 원본 Vercel 가이드의 전체 규칙(Next.js/SSR 포함)은 vercel-react-best-practices 참고.
| 우선순위 | 카테고리 | 영향도 | 접두사 |
|---|---|---|---|
| 1 | 비동기 워터폴 제거 | CRITICAL | async- |
| 2 | 번들 사이즈 최적화 | CRITICAL | bundle- |
| 3 | 리렌더링 최적화 | MEDIUM | rerender- |
| 4 | 렌더링 성능 | MEDIUM | rendering- |
| 5 | 클라이언트 데이터/이벤트 | MEDIUM | client- |
| 6 | JavaScript 성능 | LOW-MEDIUM | js- |
| 7 | 고급 패턴 | LOW | advanced- |
async-parallel - Promise.all()로 독립 작업 병렬화async-defer-await - 불필요한 경로에서 await 지연async-suspense-boundaries - Suspense로 부분 렌더링async-dependencies - 부분 의존성 있는 작업의 최대 병렬화bundle-barrel-imports - barrel file 직접 import 지양bundle-lazy - React.lazy로 코드 스플리팅bundle-preload - hover/focus 시 프리로드bundle-conditional - 기능 활성화 시에만 모듈 로드bundle-defer-third-party - 비필수 서드파티 하이드레이션 후 로드rerender-functional-setstate - 함수형 setState로 안정적 콜백rerender-lazy-state-init - 비용 큰 초기값 지연 초기화rerender-derived-state - 파생 boolean 구독rerender-dependencies - Effect 의존성 좁히기rerender-memo - memo로 비용 큰 작업 분리rerender-transitions - startTransition으로 UI 반응성 유지rendering-animate-svg-wrapper - SVG 래퍼로 GPU 가속rendering-content-visibility - 긴 목록 오프스크린 최적화rendering-hoist-jsx - 정적 JSX 호이스팅rendering-conditional-render - 삼항 연산자로 falsy 버그 방지rendering-hydration-no-flicker - 하이드레이션 불일치 없이 깜빡임 방지rendering-activity - Activity/CSS로 상태/DOM 보존client-passive-event-listeners - passive로 스크롤 지연 제거client-localstorage-schema - localStorage 버전 관리client-sync-external-store - useSyncExternalStore로 브라우저 API/외부 스토어 구독client-event-listeners - 글로벌 이벤트 리스너 중복 제거client-data-dedup - TanStack Query/SWR로 데이터 페칭 중복 제거client-abort-redundant-work - AbortController로 불필요한 비동기 작업 취소js-index-maps - Map으로 O(1) 조회js-tosorted-immutable - toSorted()로 불변성 유지js-set-map-lookups - Set으로 O(1) 멤버십 검사js-early-exit - 조기 반환으로 불필요한 처리 방지js-batch-dom-css - DOM 읽기/쓰기 분리로 레이아웃 스래싱 방지js-cache-function-results - 반복 함수 호출 모듈 레벨 캐싱advanced-event-handler-refs - 이벤트 핸들러를 ref에 저장 (재구독 방지)advanced-use-latest - useEffectEvent/useLatest로 안정적 콜백 refadvanced-init-once - 앱 초기화를 컴포넌트가 아닌 모듈 레벨에서advanced-closure-scope - 클로저 스코프 격리로 메모리 누수 방지이 스킬은 프레임워크 비종속 규칙만 포함. Next.js/SSR 전용 규칙은 원본 참고:
| 규칙 | 영향도 | 설명 |
|---|---|---|
server-cache-react | MEDIUM | React.cache()로 요청 내 중복 제거 |
server-cache-lru | HIGH | LRU 캐시로 요청 간 캐싱 |
server-serialization | HIGH | RSC 경계에서 직렬화 최소화 |
server-parallel-fetching | CRITICAL | 컴포넌트 구성으로 서버 데이터 병렬 페칭 |
server-after-nonblocking |
원본 전체 문서: vercel-labs/agent-skills: react-best-practices
memo(), useMemo() 수동 적용 불필요Weekly Installs
51
Repository
GitHub Stars
4
First Seen
Feb 20, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode50
claude-code50
github-copilot50
codex50
kimi-cli50
gemini-cli50
GSAP React 动画库使用指南：useGSAP Hook 与最佳实践
3,400 周安装
rerender-ref-callbacks - ref callback으로 DOM 접근 (useRef+useEffect 대체)rerender-avoid-usestate - useState 대체 패턴 판단 가이드rerender-url-state - URL 검색 매개변수로 상태 관리rerender-form-libraries - 폼 라이브러리로 useState 제거rerender-discriminated-union - discriminated union으로 불가능한 상태 방지rerender-use-reducer - useReducer로 복잡한 상태 전이rerender-derived-state-no-effect - 파생 상태를 렌더링 중 계산rerender-defer-reads - 상태 읽기를 사용 시점으로 지연rerender-memo-with-default-value - memo 컴포넌트 기본값 상수 추출rerender-move-effect-to-event - 인터랙션 로직을 이벤트 핸들러로 이동rerender-simple-expression-in-memo - 단순 표현식에 useMemo 사용 금지rerender-use-ref-transient-values - 일시적 값에 useRef 사용rerender-simplify-useeffect - useEffect를 커스텀 훅으로 단순화rendering-svg-precision - SVG 좌표 정밀도 축소 (SVGO)rendering-usetransition-loading - useTransition으로 수동 로딩 상태 대체rendering-inp-css-feedback - CSS :active + yield로 INP 개선rendering-composition-vs-early-return - Composition vs Early Return 선택 기준js-cache-property-access - 루프 내 프로퍼티 접근 캐싱js-cache-storage - localStorage/cookie 읽기 메모리 캐싱js-combine-iterations - 복수 배열 순회를 단일 루프로js-hoist-regexp - RegExp를 모듈 스코프로 호이스팅js-length-check-first - 배열 비교 시 길이 먼저 확인js-min-max-loop - 정렬 대신 단일 루프로 min/maxjs-iterator-helpers - Iterator Helper로 지연 처리| MEDIUM |
after()로 논블로킹 후처리 |
server-auth-actions | MEDIUM | 서버 액션 인증 검증 |
server-dedup-props | LOW | 중복 props 제거 |
bundle-dynamic-imports | CRITICAL | next/dynamic으로 동적 임포트 |
rendering-hydration-suppress-warning | LOW | suppressHydrationWarning 사용 |
async-api-routes | MEDIUM | API 라우트 비동기 패턴 |