What problem does it solve? React developers frequently struggle with inconsistent component structure, incorrect hook usage, unnecessary re-renders, and confusion around React 19 breaking changes like the removal of forwardRef and propTypes. This Skill provides concrete, copy-ready patterns that prevent common mistakes such as conditional hooks, missing effect dependencies, and state mutation. ## Core Features & Use Cases - Core Hooks Patterns: Ready-to-use templates for useState, useEffect, useCallback, and useMemo with correct dependency management and TypeScript typing. - Lazy Loading & Suspense: Code splitting patterns using React.lazy, Suspense boundaries, and error boundaries for route-level and feature-level splitting. - Performance Optimization: Guidance on React.memo, useTransition, useDeferredValue, list virtualization, and context optimization to eliminate wasted renders. - Use Case: When building a dashboard with heavy chart components, apply the lazy loading pattern to code-split each chart, wrap them in Suspense boundaries with skeleton fallbacks, and memoize event handlers to keep the UI responsive. ## Quick Start Ask the AI to create a typed React 19 component with lazy loading and a Suspense fallback following this skill's component checklist.
