What problem does it solve? React applications often suffer from unnecessary re-renders, list lag, and expensive render work that degrade UI responsiveness. This Skill provides a structured workflow to identify render hotspots, isolate fast-changing state, and apply targeted optimizations without changing UI behavior. ## Core Features & Use Cases - Render Hotspot Diagnosis: Identify what triggers re-renders, from state churn and props instability to effects that re-run on every render. - Optimization Patterns: Apply proven fixes including isolating ticking state into child components, stabilizing callbacks with useCallback and memo, and moving derived data computation into useMemo. - Profiler Validation: Use React DevTools Profiler Flamegraph and Ranked chart to measure components rendering longer than ~16 ms and compare against a pre-optimization baseline. - Use Case: A message list re-renders every second because a timer lives in the parent component. Move the timer into a memoized child component so only the indicator re-renders while the list stays stable. ## Quick Start Use the react-component-performance skill to analyze this slow React component and suggest targeted fixes for its unnecessary re-renders.
