React

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

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

규칙 카테고리

빠른 참조

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 vs 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 전용 규칙은 원본 참고:

원본 전체 문서: 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