# React Component Performance

Analyze and optimize React component performance issues (slow renders, re-render...

- Repository: https://github.com/Dimillian/Skills (4021 stars)
- Category: Design
- License: MIT
- Last updated: 2026-03-29
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add Dimillian/Skills --skill react-component-performance -g -a claude-code -y`
Codex: `npx skills add Dimillian/Skills --skill react-component-performance -g -a codex -y`
Cursor: `npx skills add Dimillian/Skills --skill react-component-performance -g -a cursor -y`
Gemini CLI: `npx skills add Dimillian/Skills --skill react-component-performance -g -a gemini-cli -y`

## Description

Analyze and optimize React component performance issues (slow renders, re-render thrash, laggy lists, expensive computations). Use when asked to profile or improve a React component, reduce re-renders, or speed up UI updates in React apps.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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.
- Split: move ticking state into a child; keep heavy lists static.
- Memoize: wrap leaf rows with `memo` only when props are stable.
- Stabilize props: use `useCallback`/`useMemo` for handlers and derived values.
- Avoid derived work in render: precompute, or compute inside memoized helpers.
- Control list size: window/virtualize long lists; avoid rendering hidden items.
- Keys: ensure stable keys; avoid index when order can change.
- Effects: verify dependency arrays; avoid effects that re-run on every render.
- Style/layout: watch for expensive layout thrash or large Markdown/diff renders.

## Optimization Patterns

### Isolate ticking state

Move a timer or animation counter into a child so the parent list never re-renders on each tick.

```tsx
// ❌ Before, entire parent (and list) re-renders every second
function Dashboard({ items }: { items: Item[] }) {
  const [tick, setTick] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setTick(t => t + 1), 1000);
    return () => clearInterval(id);
  }, []);
  return (
    <>
      <Clock tick={tick} />
      <ExpensiveList items={items} /> {/* re-renders every second */}
    </>
  );
}

The rest: https://github.com/Dimillian/Skills/blob/HEAD/react-component-performance/SKILL.md