스킬 vercel-react-best-practices

📦

vercel-react-best-practices

Name: vercel-react-best-practices
Author: sickn33

안전

Optimize React and Next.js performance

또한 다음에서 사용할 수 있습니다: ZhanlinCui,vercel-labs

Build faster React and Next.js applications with proven performance patterns. This skill provides actionable guidelines from Vercel Engineering to eliminate waterfalls, reduce bundle size, and optimize rendering.

지원: Claude Codex Code(CC)

🥉 73 브론즈

스킬 ZIP 다운로드

Claude에서 업로드

설정 → 기능 → 스킬 → 스킬 업로드로 이동

토글을 켜고 사용 시작

테스트해 보기

"vercel-react-best-practices" 사용 중입니다. Component with sequential useEffect fetches

예상 결과:

Issue: Three useEffect hooks fetch data sequentially, causing render waterfall. Solution: Combine fetches into single useEffect with Promise.all() or convert parent to server component.

"vercel-react-best-practices" 사용 중입니다. Import statement pulling entire lodash library

예상 결과:

Issue: import _ from lodash adds 72KB to bundle. Solution: Use tree-shakeable imports like import debounce from lodash/debounce or switch to lodash-es for better bundler optimization.

"vercel-react-best-practices" 사용 중입니다. Component recalculating expensive value on every render

예상 결과:

Issue: Expensive computation runs on every render. Solution: Wrap in useMemo with proper dependencies, or extract to separate memoized component that only re-renders when inputs change.

보안 감사

안전

v1 • 2/25/2026

Static analysis detected 911 pattern matches across 51 files (4901 lines), but all findings are FALSE POSITIVES. The skill is a documentation-only repository containing React/Next.js performance optimization guidelines in markdown format. Detected patterns (shell commands, dynamic imports, fetch calls, storage access) exist solely as code examples within documentation, not as executable code. No actual security risks identified.

스캔된 파일

4,901

분석된 줄 수

발견 사항

총 감사 수

보안 문제를 찾지 못했습니다

감사자: claude

품질 점수

아키텍처

100

유지보수성

콘텐츠

커뮤니티

100

보안

사양 준수

만들 수 있는 것

Building new React features

React developers building new features write components with optimal performance from the start, following Vercel-approved patterns for data fetching, rendering, and bundle optimization

Reviewing pull requests

Teams reviewing pull requests check code for performance anti-patterns before merging, catching waterfalls, unnecessary re-renders, and bundle bloat early in development

Migrating to Next.js App Router

Engineers migrating to Next.js App Router convert client-side patterns to server component architecture, learning proper use of server caching, serialization boundaries, and parallel data fetching

이 프롬프트를 사용해 보세요

Review component for performance issues

Review this React component for performance issues. Identify any render waterfalls, unnecessary re-renders, or bundle optimization opportunities. Suggest specific improvements based on Vercel best practices.

Fix data fetching waterfall

This component fetches data sequentially. Refactor it to fetch in parallel using Promise.all() or restructure as server components. Explain which approach is better for this use case.

Optimize server component caching

Analyze this server component's data fetching. Recommend a caching strategy using React.cache() for per-request deduplication or LRU caching for cross-request optimization. Include cache invalidation considerations.

Architect multi-page dashboard performance

Design a dashboard with 10+ widgets showing real-time and historical data. Specify: 1) Server vs client component boundaries, 2) Data fetching and caching strategy, 3) Loading states with Suspense, 4) Bundle optimization for third-party charting libraries.

모범 사례

Start promises early and await late - initiate data fetching before it's needed, defer await until value is required
Use server components by default - only add 'use client' when browser APIs or interactivity are required
Prefer SWR or React Query for client data fetching - built-in caching, deduplication, and revalidation

피하기

Sequential data fetching in separate useEffect hooks - causes render waterfalls
Importing entire utility libraries - bloated bundles, use specific imports instead
Using && for conditional rendering of components that render '0' - use ternary operator

자주 묻는 질문

When should I use server components vs client components?

Default to server components for data fetching, heavy computation, and backend integrations. Use client components only for interactivity (useState, useEffect), browser APIs, or event handlers. Keep client components at leaf nodes of your component tree.

How do I fix render waterfalls in my components?

Use Promise.all() for independent fetches, restructure to parallel fetching in server components, or use libraries like better-all for partial dependencies. Start fetches early (top-level) and await late (where needed).

What's the difference between React.cache() and LRU caching?

React.cache() provides per-request deduplication - caches within a single render. LRU caching persists across requests using external stores like Redis or in-memory Map. Use cache() for deduplication, LRU for expensive cross-request data.

How can I reduce my Next.js bundle size?

Use next/dynamic for heavy components, import utilities directly (not barrel files), defer third-party scripts until after hydration, and use conditional imports for features not needed on initial load. Check bundle analyzer with next-bundle-analyzer.

Why does SWR help with client-side data fetching?

SWR provides automatic request deduplication (multiple components requesting same data share one fetch), caching with stale-while-revalidate strategy, focus revalidation, and optimistic updates. Reduces network requests and improves perceived performance.

When should I use startTransition?

Use startTransition for non-urgent state updates that can be interrupted, like filtering large lists or typing in search inputs. Keeps UI responsive by allowing React to prioritize user interactions over background updates.