react-performance-optimization
Memoization, code splitting, and virtualization patterns for optimizing React application performance.
- Covers four core optimization techniques: memoization (React.memo, useMemo, useCallback), code splitting with lazy/Suspense, virtualization for large lists, and state management strategies to minimize render cascades
- Includes React 18+ concurrent features (useTransition, useDeferredValue) for improved responsiveness and perceived performance
- Provides profiling workflow using React DevTools Profiler to identify bottlenecks before and after optimization, with emphasis on measuring impact rather than premature optimization
- Documents common anti-patterns (over-memoization, inline objects breaking memoization, index-based keys) and includes performance checklist covering profiling, optimization targets, and verification steps
React Performance Optimization
Expert guidance for optimizing React application performance through memoization, code splitting, virtualization, and efficient rendering strategies.
When to Use This Skill
- Optimizing slow-rendering React components
- Reducing bundle size for faster initial load times
- Improving responsiveness for large lists or data tables
- Preventing unnecessary re-renders in complex component trees
- Optimizing state management to reduce render cascades
- Improving perceived performance with code splitting
- Debugging performance issues with React DevTools Profiler
Core Concepts
React Rendering Optimization
React re-renders components when props or state change. Unnecessary re-renders waste CPU cycles and degrade user experience. Key optimization techniques:
- Memoization: Cache component renders and computed values
More from nickcrew/claude-ctx-plugin
owasp-top-10
OWASP Top 10 security vulnerabilities with detection and remediation patterns. Use when conducting security audits, implementing secure coding practices, or reviewing code for common security vulnerabilities.
453ui-design-aesthetics
Generates high-quality, non-generic UI designs with a focus on performance, progressive disclosure, and distinctive aesthetics.
114helm-chart-patterns
Helm chart development patterns for packaging and deploying Kubernetes applications. Use when creating reusable Helm charts, managing multi-environment deployments, or building application catalogs for Kubernetes.
110code-explanation
Use when explaining code, concepts, or system behavior to a specific audience level - provides a structured explanation workflow with depth control and validation steps.
103security-testing-patterns
Security testing patterns including SAST, DAST, penetration testing, and vulnerability assessment techniques. Use when implementing security testing pipelines, conducting security audits, or validating application security controls.
91typescript-advanced-patterns
Advanced TypeScript patterns for type-safe, maintainable code using sophisticated type system features. Use when building type-safe APIs, implementing complex domain models, or leveraging TypeScript's advanced type capabilities.
89