What problem does it solve?
React and Next.js apps can become slow and inefficient due to waterfalls in async code, bloated bundles, slow server rendering, redundant client fetching, excessive re-renders, and inefficient rendering work.
Core Features & Use Cases
- Eliminate waterfalls by identifying sequential awaits and restructuring logic to run independent operations in parallel.
- Reduce bundle size by avoiding barrel imports, using dynamic imports for heavy components, and loading non-critical third-party libraries after hydration.
- Improve server and client performance by applying server-side parallel fetching patterns, using caching/deduplication strategies, and leveraging SWR for automatic request deduplication.
- Cut re-renders and rendering cost using React performance patterns (memoization, derived state, effect hygiene, Suspense/activity where appropriate).
- Target hot-path JavaScript inefficiencies with micro-optimizations such as caching repeated computations and minimizing expensive DOM/layout work.
Quick Start
Use the react-best-practices skill to review your Next.js/React codebase for performance bottlenecks and generate prioritized fixes starting with eliminating waterfalls and reducing bundle size.
