What problem does it solve?
Many React components suffer from unnecessary re-renders, heavy synchronous work, and leaked resources that cause jank, high CPU usage, and dropped frames—especially in real-time contexts like camera feeds and animations. This Skill provides actionable patterns to minimize renders, defer or offload intensive tasks, and ensure proper cleanup so interfaces remain responsive on low-end devices.
Core Features & Use Cases
- Render reduction: Techniques to limit re-renders through stable callbacks, memoization, and state splitting.
- Heavy work management: Guidance on deferring work with transitions, web workers, lazy loading, and throttling detection loops.
- Memory and resource safety: Best practices for effect cleanup, stopping media tracks, and aborting fetches to avoid leaks.
- Real-world examples: Optimize a camera-to-canvas capture loop, make long virtual lists performant, and keep animation loops within requestAnimationFrame for smooth 60fps playback.
Quick Start
Use the react-performance skill to analyze a React component and provide prioritized actionable changes to reduce renders, lower CPU usage, and fix memory leaks.
