What problem does it solve?
Provides concrete, categorized rules and practical patterns to diagnose and fix common React performance problems such as cascading data-fetch waterfalls, excessive client-side JavaScript, large bundle sizes, and unnecessary re-renders that slow down load time and user responsiveness.
Core Features & Use Cases
- Eliminate Waterfalls: Guidance to parallelize independent requests, use Suspense boundaries, and colocate data requirements to reduce sequential latency.
- Bundle Size & Loading: Patterns for dynamic imports, targeted imports, conditional loading, and deferring third-party libraries to shrink initial JavaScript payload.
- Server vs Client Boundaries: Rules for preferring Server Components, minimizing serialization, caching strategies, and placing 'use client' only at leaves.
- Client Data & Re-rendering: Recommendations to use TanStack Query or SWR, individual store selectors, memoization, stable callbacks, virtualization, and transitions to keep UIs responsive.
- Use Cases: Speed up page Time to Interactive for a Next.js dashboard; reduce bundle bloat caused by large icon libraries; fix frequent UI jank by identifying and eliminating unnecessary re-renders.
Quick Start
Ask the skill to analyze my React/Next.js repository for bundle bloat, data-fetch waterfalls, and unnecessary re-renders and return prioritized, actionable fixes.
