react-performance-patterns

What problem does it solve?

This skill helps AI agents guide developers to identify and fix React performance bottlenecks, delivering faster, smoother user experiences.

Core Features & Use Cases

• Profiling & measurement: use React DevTools Profiler, Chrome Performance, and Lighthouse to locate render bottlenecks.
• Rendering optimization: apply React.memo, useMemo, and useCallback to reduce unnecessary rerenders in lists and high-frequency components.
• Code splitting & virtualization: leverage dynamic imports and virtualization (react-window) to shrink initial load and improve scroll performance.
• Context optimization: structure contexts to minimize re-renders through selective subscriptions and memoized values.

Use Case: Optimize a dashboard by profiling, memoizing expensive components, splitting code, and virtualization to handle large data sets.

Quick Start

Start by profiling a sample component with React DevTools to locate the top bottleneck, then apply memoization and code splitting to reduce render counts and bundle size, finally verify improvements with Core Web Vitals.