react

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

React

Vercel 가이드 기반 React 성능 최적화 베스트 프랙티스. 프레임워크 비종속(Next.js, Remix, Vite 등 무관).

각 규칙의 상세 설명과 코드 예제는 references/ 참고. 원본 Vercel 가이드의 전체 규칙(Next.js/SSR 포함)은 vercel-react-best-practices 참고.

基于Vercel指南的React性能优化最佳实践。与框架无关（支持Next.js、Remix、Vite等各类框架）。

各规则的详细说明及代码示例请参考references/。包含Next.js/SSR相关的完整Vercel指南规则，请查看vercel-react-best-practices。

규칙 카테고리

规则分类


async-
bundle-
rerender-
rendering-
client-
js-
advanced-

우선순위	카테고리	영향도	접두사
1	비동기 워터폴 제거	CRITICAL	`async-`
2	번들 사이즈 최적화	CRITICAL	`bundle-`
3	리렌더링 최적화	MEDIUM	`rerender-`
4	렌더링 성능	MEDIUM	`rendering-`
5	클라이언트 데이터/이벤트	MEDIUM	`client-`
6	JavaScript 성능	LOW-MEDIUM	`js-`
7	고급 패턴	LOW	`advanced-`


async-
bundle-
rerender-
rendering-
client-
js-
advanced-

优先级	分类	影响程度	前缀
1	消除异步瀑布流	关键	`async-`
2	包体积优化	关键	`bundle-`
3	重渲染优化	中等	`rerender-`
4	渲染性能	中等	`rendering-`
5	客户端数据/事件	中等	`client-`
6	JavaScript性能	低-中等	`js-`
7	高级模式	低	`advanced-`

빠른 참조

快速参考

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

1. 消除异步瀑布流（关键）

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

```
async-parallel
```
- 使用
```
Promise.all()
```
并行处理独立任务
```
async-defer-await
```
- 在非必要路径中延迟await
```
async-suspense-boundaries
```
- 使用Suspense实现部分渲染
```
async-dependencies
```
- 最大化存在部分依赖的任务的并行度

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

2. 包体积优化（关键）

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

```
bundle-barrel-imports
```
- 避免直接导入barrel文件
```
bundle-lazy
```
- 使用
```
React.lazy
```
实现代码分割
```
bundle-preload
```
- 在hover/focus时进行预加载
```
bundle-conditional
```
- 仅在功能激活时加载模块
```
bundle-defer-third-party
```
- 延迟加载非必要第三方依赖至 hydration 完成后

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

3. 重渲染优化（中等）

```
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를 커스텀 훅으로 단순화

```
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
```
- 使用表单库替代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简化为自定义hooks

4. 렌더링 성능 (MEDIUM)

4. 渲染性能（中等）

```
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 vs Early Return 선택 기준

```
rendering-animate-svg-wrapper
```
- 使用SVG容器实现GPU加速
```
rendering-content-visibility
```
- 长列表离屏内容优化
```
rendering-hoist-jsx
```
- 静态JSX提升
```
rendering-conditional-render
```
- 使用三元运算符避免falsy值bug
```
rendering-hydration-no-flicker
```
- 在无hydration不一致的情况下避免页面闪烁
```
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
```
- 组件组合与提前返回的选择标准

5. 클라이언트 데이터/이벤트 (MEDIUM)

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

```
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로 불필요한 비동기 작업 취소

```
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)

6. JavaScript性能（低-中等）

```
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로 지연 처리

```
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)

7. 高级模式（低）

```
advanced-event-handler-refs
```
- 이벤트 핸들러를 ref에 저장 (재구독 방지)
```
advanced-use-latest
```
- useEffectEvent/useLatest로 안정적 콜백 ref
```
advanced-init-once
```
- 앱 초기화를 컴포넌트가 아닌 모듈 레벨에서
```
advanced-closure-scope
```
- 클로저 스코프 격리로 메모리 누수 방지

```
advanced-event-handler-refs
```
- 将事件处理程序存储至ref（避免重新订阅）
```
advanced-use-latest
```
- 使用useEffectEvent/useLatest实现稳定回调ref
```
advanced-init-once
```
- 在模块级别而非组件内完成应用初始化
```
advanced-closure-scope
```
- 隔离闭包作用域避免内存泄漏

Vercel 원본 가이드 추가 규칙

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

本技能仅包含与框架无关的规则。Next.js/SSR专属规则请参考原指南：

规则	影响程度	说明
`server-cache-react`	中等	使用 `React.cache()` 消除请求内重复操作
`server-cache-lru`	高	使用LRU缓存实现跨请求缓存
`server-serialization`	高	在RSC边界处最小化序列化操作
`server-parallel-fetching`	关键	通过组件组合实现服务器端数据并行获取
`server-after-nonblocking`	中等	使用 `after()` 实现非阻塞后处理
`server-auth-actions`	中等	服务器端操作的身份验证校验
`server-dedup-props`	低	消除重复props
`bundle-dynamic-imports`	关键	使用 `next/dynamic` 实现动态导入
`rendering-hydration-suppress-warning`	低	使用suppressHydrationWarning
`async-api-routes`	中等	API路由异步模式

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

참고

参考资料

React 공식 문서
React Compiler - 사용 시
```
memo()
```
,
```
useMemo()
```
수동 적용 불필요
Vercel: How we made the dashboard twice as fast
Vercel: How we optimized package imports

React官方文档
React Compiler - 使用该工具后无需手动应用
```
memo()
```
、
```
useMemo()
```
Vercel：我们如何将仪表板速度提升一倍
Vercel：我们如何优化包导入