React Component Performance

The react-component-performance skill enables AI agents to analyze React component code for performance bottlenecks and suggest specific optimizations. It helps identify inefficient rendering patterns, unnecessary re-renders, and memory leaks within the application structure.

When to use it

• Reviewing complex dashboard widgets that experience lag during data updates.
• Optimizing large e-commerce product lists before deployment to improve load times.
• Debugging slow interactions in single-page applications where state changes trigger excessive renders.
• Auditing legacy codebases to refactor components for better scalability and efficiency.

Key capabilities

• Detects inefficient useEffect dependencies and unnecessary re-renders.
• Identifies missing memoization with React.memo, useMemo, or useCallback.
• Analyzes component hierarchy to find potential render-blocking elements.
• Suggests code refactors to reduce bundle size and improve runtime speed.

Example prompts

• "Analyze this React list component and identify why it re-renders every time the parent state changes."
• "Optimize the following useEffect hook to prevent unnecessary API calls on every render."
• "Review this dashboard widget for performance issues and suggest specific memoization strategies."

Tips & gotchas

Ensure the code provided includes necessary imports (like React) so the analysis context is complete. Focus on components with frequent state updates, as these yield the highest improvement potential from optimization suggestions.