What problem does it solve? React apps slow down through excessive rerenders, oversized lists, bloated initial bundles, and misapplied memoization. This Skill enforces a measurement-first discipline so you fix real bottlenecks instead of scattering premature useMemo and React.memo calls that add overhead without benefit. ## Core Features & Use Cases - Measurement-first diagnosis: Use Profiler, console.time, performance.mark, DevTools, and Lighthouse to quantify rerender cost and Core Web Vitals before changing code. - Memoization decision rules: Apply React.memo, useMemo, and useCallback only when computation is expensive AND identity stability matters downstream, avoiding net-loss optimizations. - Concrete optimization patterns: Virtualize long lists with @tanstack/react-virtual, code-split heavy routes with React.lazy and <Suspense>, lazy-load below-the-fold widgets, and narrow frequently-changing context. - Use Case: A dashboard with a 500-row table feels laggy. Profile the render, virtualize the list, stabilize row props and keys, and verify the improvement with a second profile. ## Quick Start Profile this slow React component and tell me which rerenders to eliminate and whether any memoization is actually justified.
