react-component-performance

Installation
SKILL.md

React Component Performance

Overview

Identify render hotspots, isolate expensive updates, and apply targeted optimizations without changing UI behavior.

Workflow

  1. Reproduce or describe the slowdown.
  2. Identify what triggers re-renders (state updates, props churn, effects).
  3. Isolate fast-changing state from heavy subtrees.
  4. Stabilize props and handlers; memoize where it pays off.
  5. Reduce expensive work (computation, DOM size, list length).
  6. Validate: open React DevTools Profiler → record the interaction → inspect the Flamegraph for components rendering longer than ~16 ms → compare against a pre-optimization baseline recording.

Checklist

  • Measure: use React DevTools Profiler or log renders; capture baseline.
  • Find churn: identify state updated on a timer, scroll, input, or animation.
Related skills

More from dimillian/skills

Installs
598
GitHub Stars
3.5K
First Seen
Jan 28, 2026