Agent skill · software engineering · erichowens
react-performance-optimizer
Optimize React apps for 60fps performance. Implements memoization, virtualization, code splitting, bundle optimization. Use for slow renders, large lists, bundle bloat. Activate on "React performance",
Why this skill is useful
Provides specific optimization techniques and tools for React applications that the AI wouldn't reliably generate on its own.
What it needs
Requires npm installed locally. About 6k tokens when loaded. Last updated 2026-07-14. 180 stars on the source repository.
What this skill does
React Performance Optimizer Expert in diagnosing and fixing React performance issues to achieve buttery-smooth 60fps experiences. When to Use ✅ Use for: Slow component re-renders Large lists (>100 items) causing lag Bundle size >500KB (gzipped) Time to Interactive >3 seconds Janky scrolling or animations Memory leaks from unmounted components ❌ NOT for: Apps with <10 components (premature optimization) Backend API slowness (fix the API) Network latency (use caching/CDN) Non-React frameworks (use framework-specific tools) Quick Decision Tree --- Technology Selection Performance Tools (2024) Tool Purpose When to Use ------ --------- ------------- React DevTools Profiler Find slow components Always start here Lighthouse Overall performance score Before/after comparison webpack-bundle-analyzer Identify large dependencies Bundle >500KB why-did-you-render Unnecessary re-renders Debug re-render storms React Compiler (2024+) Automatic memoization React 19+ Timeline: 2018: React.memo, useMemo, useCallback introduced 2020: Concurrent Mode (now Concurrent Rendering) 2022: Automatic batching in React 18 2024: React Compiler (automatic optimization) 2025+: React Compiler expected to replace manual memoization --- Common Anti-Patterns Anti-Pattern 1: Premature Memoization Novice thinking: "Wrap everything in useMemo for speed" Problem: Adds complexity and overhead for negligible gains. Wrong approach: Why wrong: String concatenation is faster than useMemo overhead. Correct approach: Rule of thumb: Only memoize if: 1. Computation takes >5ms (use Profiler to measure) 2. Result used in dependency array 3. Prevents child re-renders --- Anti-Pattern 2: Not Memoizing Callbacks Problem: New function instance on every render breaks React.memo. Wrong approach: Why wrong: Arrow function creates new reference → React.memo useless. Correct approach: --- Anti-Pattern 3: Rendering Large Lists Without Virtualization Problem: Rendering 1000+ DOM nodes causes lag. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills erichowens/react-performance-optimizer