What problem does it solve?
This Skill helps you prevent common performance failures in React and Next.js projects—especially sequential data-fetching waterfalls, excessive bundle size, slow server-side rendering, and unnecessary re-renders—so your UI loads faster and feels more responsive.
Core Features & Use Cases
- Eliminate waterfalls: restructure async flows to run independent work in parallel, use Suspense strategically, and reduce end-to-end latency.
- Shrink bundle size: avoid barrel import bloat, prefer direct imports, use dynamic imports for heavy components, and preload based on user intent.
- Optimize server & RSC boundaries: authenticate server actions, avoid unnecessary serialization across RSC/client boundaries, parallelize server component fetching, and apply caching/deduplication correctly.
- Improve client data fetching: use SWR for automatic deduplication and caching, and minimize expensive localStorage patterns.
- Reduce re-renders & rendering cost: derive state correctly, stabilize memoization inputs, narrow effect dependencies, and apply targeted rendering/perf techniques (e.g., content-visibility).
- Micro-optimize hot paths safely: cache repeated lookups/calls and avoid mutation pitfalls like
sort() on props/state.
Quick Start
Use the react-best-practices skill to fix slow page loads by applying the waterfall eliminations and bundle-size rules first, then moving to server, client, and re-render optimizations for the specific symptoms you observe.
