react-performance-review

What problem does it solve?

This skill helps developers identify and prioritize performance anti-patterns in React applications so they can reduce UI jank, unnecessary renders, and large initial bundles.

Core Features & Use Cases

• Concurrency checks: Detect missing useTransition, useDeferredValue, and Suspense boundaries to prevent blocking renders for expensive updates.
• Effect and memoization analysis: Find incorrect or missing useEffect dependencies, missing cleanups, unnecessary effects, unstable callbacks, and misuse of useMemo/useCallback/React.memo.
• Re-render and state optimization: Surface context/provider re-render blast, prop stability issues, redundant state, and opportunities for colocating or using reducers.
• Bundle and loading improvements: Identify heavy synchronous imports, missing code-splitting opportunities, and absent lazy-loading fallbacks.
• Use case: Audit a search component that filters large lists, a dashboard with heavy visualizations, or an app with routing delays.

Quick Start

Ask the skill to perform a React performance review of a component or file and return critical issues, warnings, suggestions, and a short summary.