React Performance Optimizer

What it does

This skill helps diagnose and fix performance issues in React applications, aiming to achieve smooth 60fps experiences. It provides guidance on identifying bottlenecks like slow component re-renders, large lists causing lag, excessive bundle sizes, and janky scrolling or animations. The skill leverages tools and techniques for optimization, including memoization, virtualization, code splitting, and the React Compiler (when available).

When to use it

• When experiencing slow component re-renders.
• When working with large lists (over 100 items) that cause lag.
• If your application's gzipped bundle size exceeds 500KB.
• When the Time to Interactive is greater than 3 seconds.
• For applications exhibiting janky scrolling or animations.

Key capabilities

• Performance Diagnosis: Identifies slow components using the React DevTools Profiler and Lighthouse.
• Optimization Recommendations: Suggests techniques like memoization, virtualization, and code splitting based on specific issues.
• Tool Selection Guidance: Recommends appropriate performance tools such as webpack-bundle-analyzer and why-did-you-render.
• Anti-Pattern Awareness: Highlights common optimization mistakes like premature memoization.
• React Compiler Integration (2024+): Leverages the React Compiler for automatic optimizations in React 19 and later versions.

Example prompts

• "My React component is rendering slowly, what should I check?"
• "How can I optimize a list with over 100 items in my React application?"
• "My bundle size is too large; how do I reduce it?"
• “What are some common anti-patterns to avoid when optimizing React performance?”

Tips & gotchas

• Avoid premature optimization: Don't apply optimizations unless you’ve identified a specific performance bottleneck. Start with the Profiler.
• Focus on root causes: If your Lighthouse score is low, investigate multiple areas for improvement rather than applying quick fixes.
• React Compiler (2024+): This skill can leverage automatic memoization through the React Compiler when using React 19 or later.