What problem does it solve? React applications often suffer from unnecessary re-renders, oversized bundles, and slow rendering of long lists. This Skill provides concrete patterns for diagnosing and fixing these performance problems with memoization, lazy loading, and virtualization. ## Core Features & Use Cases - Memoization guidance: Apply useMemo, useCallback, and React.memo only where they earn their cost, with correct patterns like copying arrays before sorting. - Code splitting: Split heavy or below-the-fold components (charts, 3D scenes, rich text editors) with React.lazy and Suspense to shrink initial bundles. - List virtualization: Render lists of 100+ DOM-heavy rows efficiently with @tanstack/react-virtual. - Use Case: A dashboard page re-renders an entire market list on every keystroke. Profile with React DevTools, stabilize callbacks with useCallback, memoize row components with React.memo, and virtualize the list once it exceeds a few hundred rows. ## Quick Start Ask the assistant to review a slow React component and apply the appropriate memoization, code-splitting, or virtualization pattern from this Skill.
