react-best-practices
Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Use when writing new React components or Next.js pages, implementing data fetching (client or server-side), or reviewing code for performance issues.
Vercel React Best Practices
Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains 45 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.
When to Use
Reference these guidelines when:
- Writing new React components or Next.js pages
- Implementing data fetching (client or server-side)
- Reviewing code for performance issues
- Refactoring existing React/Next.js code
- Optimizing bundle size or load times
Rule Categories by Priority
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Eliminating Waterfalls | CRITICAL | async- |
| 2 | Bundle Size Optimization | CRITICAL | bundle- |
| 3 | Server-Side Performance | HIGH | server- |
| 4 | Client-Side Data Fetching | MEDIUM-HIGH | client- |
| 5 | Re-render Optimization | MEDIUM | rerender- |
| 6 | Rendering Performance | MEDIUM | rendering- |
| 7 | JavaScript Performance | LOW-MEDIUM | js- |
| 8 | Advanced Patterns | LOW | advanced- |
Quick Reference
1. Eliminating Waterfalls (CRITICAL)
async-defer-await- Move await into branches where actually usedasync-parallel- Use Promise.all() for independent operationsasync-dependencies- Use better-all for partial dependenciesasync-api-routes- Start promises early, await late in API routes- `as
Subscribers only
The full skill, its 51 bundled files and every download is included with every paid Complete AI plan.
Details
| Source | community |
|---|---|
| License | — |
| Risk label | safe ("critical" means the skill may run commands or touch files — read before use) |
| Files | AGENTS.md, README.md, SKILL.md, metadata.json, rules/_sections.md, rules/_template.md, rules/advanced-event-handler-refs.md, rules/advanced-use-latest.md, rules/async-api-routes.md, rules/async-defer-await.md, rules/async-dependencies.md, rules/async-parallel.md, rules/async-suspense-boundaries.md, rules/bundle-barrel-imports.md, rules/bundle-conditional.md, rules/bundle-defer-third-party.md, rules/bundle-dynamic-imports.md, rules/bundle-preload.md, rules/client-event-listeners.md, rules/client-swr-dedup.md, rules/js-batch-dom-css.md, rules/js-cache-function-results.md, rules/js-cache-property-access.md, rules/js-cache-storage.md, rules/js-combine-iterations.md, rules/js-early-exit.md, rules/js-hoist-regexp.md, rules/js-index-maps.md, rules/js-length-check-first.md, rules/js-min-max-loop.md, rules/js-set-map-lookups.md, rules/js-tosorted-immutable.md, rules/rendering-activity.md, rules/rendering-animate-svg-wrapper.md, rules/rendering-conditional-render.md, rules/rendering-content-visibility.md, rules/rendering-hoist-jsx.md, rules/rendering-hydration-no-flicker.md, rules/rendering-svg-precision.md, rules/rerender-defer-reads.md, rules/rerender-dependencies.md, rules/rerender-derived-state.md, rules/rerender-functional-setstate.md, rules/rerender-lazy-state-init.md, rules/rerender-memo.md, rules/rerender-transitions.md, rules/server-after-nonblocking.md, rules/server-cache-lru.md, rules/server-cache-react.md, rules/server-parallel-fetching.md, rules/server-serialization.md |
| Added | 2026-02-27 |
Related skills
accesslint-audit
Find and fix WCAG 2.2 accessibility issues. Two modes — report (sweep a codebase or page, produce a prioritized written report, no edits) and fix (audit→edit→verify loop on a target). Prefers direct-CDP live-DOM auditing; falls back to a browser-MCP composition or HTML-string audits.
angular
Modern Angular (v20+) expert with deep knowledge of Signals, Standalone Components, Zoneless applications, SSR/Hydration, and reactive patterns.
angular-best-practices
Angular performance optimization and best practices guide. Use when writing, reviewing, or refactoring Angular code for optimal performance, bundle size, and rendering efficiency.
angular-migration
Master AngularJS to Angular migration, including hybrid apps, component conversion, dependency injection changes, and routing migration.
angular-state-management
Master modern Angular state management with Signals, NgRx, and RxJS. Use when setting up global state, managing component stores, choosing between state solutions, or migrating from legacy patterns.
angular-ui-patterns
Modern Angular UI patterns for loading states, error handling, and data display. Use when building UI components, handling async data, or managing component states.