What problem does it solve?
React and Next.js codebases often ship with performance regressions caused by waterfalls, inefficient bundling, slow server rendering patterns, and excessive re-renders, leading to worse LCP/TTI and higher operational cost.
Core Features & Use Cases
- Eliminates async waterfalls by deferring awaits until needed, parallelizing independent work, and restructuring API routes and RSC trees for maximum concurrency.
- Reduces bundle size and blocking work by avoiding barrel-file imports, deferring non-critical third-party code, using dynamic imports for heavy components, and preloading based on user intent.
- Improves server and RSC efficiency with React.cache() for per-request deduplication, LRU caching for cross-request reuse, hoisting static I/O to module scope, and minimizing serialized props at RSC boundaries.
- Stabilizes rendering behavior using targeted re-render optimizations like derived state handling, dependency narrowing, functional setState updates, and preventing remounts from inline component definitions.
- Use Case: reviewing a Next.js feature that ships a new dashboard page with multiple data sources, a larger-than-expected bundle, and sluggish interactions—then applying the guide’s rules to produce a faster, more consistent implementation.
Quick Start
Apply this skill by asking an AI to review your React/Next.js changes for performance problems and refactor them to follow the highest-impact Vercel Engineering rules.
