react

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-
4	렌더링 성능	MEDIUM	rendering-
5	클라이언트 데이터/이벤트	MEDIUM	client-
6	JavaScript 성능	LOW-MEDIUM	js-
7	고급 패턴	LOW	advanced-

빠른 참조

1. 비동기 워터폴 제거 (CRITICAL)

• async-parallel - Promise.all()로 독립 작업 병렬화
• async-defer-await - 불필요한 경로에서 await 지연
• async-suspense-boundaries - Suspense로 부분 렌더링
• async-dependencies - 부분 의존성 있는 작업의 최대 병렬화

2. 번들 사이즈 최적화 (CRITICAL)

• bundle-barrel-imports - barrel file 직접 import 지양
• bundle-lazy - React.lazy로 코드 스플리팅
• bundle-preload - hover/focus 시 프리로드
• bundle-conditional - 기능 활성화 시에만 모듈 로드
• bundle-defer-third-party - 비필수 서드파티 하이드레이션 후 로드

3. 리렌더링 최적화 (MEDIUM)

• rerender-functional-setstate - 함수형 setState로 안정적 콜백
• rerender-lazy-state-init - 비용 큰 초기값 지연 초기화
• rerender-derived-state - 파생 boolean 구독
• 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 - 폼 라이브러리로 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를 커스텀 훅으로 단순화

4. 渲染性能（MEDIUM）

• 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
• rendering-svg-precision - 降低 SVG 坐标精度（SVGO）
• rendering-usetransition-loading - 使用 useTransition 替代手动加载状态
• rendering-inp-css-feedback - 使用 CSS :active + yield 改善 INP
• rendering-composition-vs-early-return - 选择 Composition 或 Early Return 的标准

5. 客户端数据/事件（MEDIUM）

• 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 取消不必要的异步工作

6. JavaScript 性能（LOW-MEDIUM）

• 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/max，而非排序
• js-iterator-helpers - 使用 Iterator Helper 延迟处理

7. 高级模式（LOW）

• advanced-event-handler-refs - 将事件处理器存储在 ref 中（避免重新订阅）
• advanced-use-latest - 使用 useEffectEvent/useLatest 获取稳定的回调 ref
• advanced-init-once - 在模块级而非组件中初始化应用
• advanced-closure-scope - 通过隔离闭包作用域防止内存泄漏

Vercel 原始指南的补充规则

此技能仅包含框架无关的规则。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 路由的异步模式

完整原始文档：vercel-labs/agent-skills: react-best-practices

参考

• React 官方文档
• React Compiler - 使用时无需手动应用 memo()、useMemo()
• Vercel：我们如何让仪表盘速度提升一倍
• Vercel：我们如何优化包导入