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: ダッシュボードを 2 倍高速化した方法
• Vercel: パッケージインポートを最適化した方法