What problem does it solve? React and Next.js apps often feel slow for reasons developers misdiagnose — memoizing components while a request waterfall dominates load time, or shipping barrel imports that bloat the client bundle. This Skill provides a priority-ordered checklist of the seven categories that actually cause slowness, so optimization effort goes where it matters. ## Core Features & Use Cases - Priority-ordered diagnosis: Seven ranked categories from request waterfalls and bundle size down to hot-loop JavaScript, mapped to Core Web Vitals (LCP, INP, CLS, TBT). - Concrete fix patterns: Parallelizing sequential awaits with Promise.all, splitting Server Components for parallel rendering, direct imports over barrels, React.cache() deduplication, and correct memoization discipline. - Review red flags: A stop-list for code review — unauthorized Server Actions, mutable module-level server state, index keys on reorderable lists, and hand-written memoization under React Compiler. - Use Case: A Next.js page loads slowly. You find three sequential awaits in a Server Component, convert them to Promise.all, split sibling fetches into child components, and defer a third-party chat script — cutting LCP without touching a single useMemo. ## Quick Start Ask the AI to review a slow React or Next.js page or component for performance problems using the react-performance priority checklist.
