react-performance-optimization

react-performance-optimization gives expert guidance for making React applications faster through memoization, code splitting, virtualization, and efficient rendering strategies. It addresses the problem that React re-renders components whenever props or state change, and unnecessary re-renders waste CPU and degrade user experience. The skill applies when optimizing slow-rendering components, reducing bundle size for faster initial loads, improving responsiveness for large lists or data tables, preventing re-render cascades in complex trees, or debugging performance with the React DevTools Profiler.

It centers on a measurement-first workflow: profile with React DevTools to find real bottlenecks, apply targeted optimizations, then profile again to verify improvements and avoid premature optimization. Concrete patterns include wrapping components with React.memo, caching computed values with useMemo, stabilizing function references with useCallback, code-splitting routes with React.lazy and Suspense, and virtualizing large lists with react-window (FixedSizeList). It also covers React 18+ concurrent features (useTransition, useDeferredValue) and state structuring to minimize render cascades such as context splitting. Detailed patterns are split into reference files loaded as needed: memoization.md, code-splitting.md, virtualization.md, state-management.md, concurrent-features.md, profiling-debugging.md, and common-pitfalls.md, and the skill ships a validation/rubric.yaml. It enumerates common mistakes like over-memoization, inline objects/arrays breaking memoization, missing dependencies causing stale closures, using array index as a key, and a single large context.

Target users are React developers, especially those working in TypeScript (file patterns cover .ts and .tsx), tackling slow apps, large datasets, or heavy bundles. A performance checklist frames before, during, and after work: profile and measure a baseline, memoize expensive components and values, use useCallback for functions passed to memoized children, code-split routes and heavy components, virtualize lists over 100 items, use stable unique keys, split state by update frequency, then re-profile to confirm gains and check for regressions. Tools referenced include React DevTools, webpack-bundle-analyzer, rollup-plugin-visualizer, and Lighthouse.