react-component-performance

•

3.3k1723 months ago

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.

Quick Install

npxskills add dimillian/skills--skill react-component-performance

Instructions

React Component Performance

Overview

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

Workflow

Reproduce or describe the slowdown.
Identify what triggers re-renders (state updates, props churn, effects).
Isolate fast-changing state from heavy subtrees.
Stabilize props and handlers; memoize where it pays off.
Reduce expensive work (computation, DOM size, list length).
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.

// ❌ 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 */}
    </>
  );
}

// ✅ After – only <Clock> re-renders; list is untouched
function Clock() {
  const [tick, setTick] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setTick(t => t + 1), 1000);
    return () => clearInterval(id);
  }, []);
  return <span>{tick}s</span>;
}

function Dashboard({ items }: { items: Item[] }) {
  return (
    <>
      <Clock />
      <ExpensiveList items={items} />
    </>
  );
}

Stabilize callbacks with `useCallback` + `memo`

// ❌ Before – new handler reference on every render busts Row memo
function List({ items }: { items: Item[] }) {
  const handleClick = (id: string) => console.log(id); // new ref each render
  return items.map(item => <Row key={item.id} item={item} onClick={handleClick} />);
}

// ✅ After – stable handler; Row only re-renders when its own item changes
const Row = memo(({ item, onClick }: RowProps) => (
  <li onClick={() => onClick(item.id)}>{item.name}</li>
));

function List({ items }: { items: Item[] }) {
  const handleClick = useCallback((id: string) => console.log(id), []);
  return items.map(item => <Row key={item.id} item={item} onClick={handleClick} />);
}

Prefer derived data outside render

// ❌ Before – recomputes on every render
function Summary({ orders }: { orders: Order[] }) {
  const total = orders.reduce((sum, o) => sum + o.amount, 0); // runs every render
  return <p>Total: {total}</p>;
}

// ✅ After – recomputes only when orders changes
function Summary({ orders }: { orders: Order[] }) {
  const total = useMemo(() => orders.reduce((sum, o) => sum + o.amount, 0), [orders]);
  return <p>Total: {total}</p>;
}

Additional patterns

Split rows: extract list rows into memoized components with narrow props.
Defer heavy rendering: lazy-render or collapse expensive content until expanded.

Profiling Validation Steps

Open React DevTools → Profiler tab.
Click Record, perform the slow interaction, then Stop.
Switch to Flamegraph view; any bar labeled with a component and time > ~16 ms is a candidate.
Use Ranked chart to sort by self render time and target the top offenders.
Apply one optimization at a time, re-record, and compare render counts and durations against the baseline.

Example Reference

Load references/examples.md when the user wants a concrete refactor example.

Loading…

Related Skills

skill-creator

Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.

367,360

skill-creator

Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.

367,309

1password

Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.

365,915

himalaya

CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).

365,885

React Component Performance

Overview

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

Workflow

Reproduce or describe the slowdown.
Identify what triggers re-renders (state updates, props churn, effects).
Isolate fast-changing state from heavy subtrees.
Stabilize props and handlers; memoize where it pays off.
Reduce expensive work (computation, DOM size, list length).
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.

// ❌ 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 */}
    </>
  );
}

// ✅ After – only <Clock> re-renders; list is untouched
function Clock() {
  const [tick, setTick] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setTick(t => t + 1), 1000);
    return () => clearInterval(id);
  }, []);
  return <span>{tick}s</span>;
}

function Dashboard({ items }: { items: Item[] }) {
  return (
    <>
      <Clock />
      <ExpensiveList items={items} />
    </>
  );
}

Stabilize callbacks with `useCallback` + `memo`

// ❌ Before – new handler reference on every render busts Row memo
function List({ items }: { items: Item[] }) {
  const handleClick = (id: string) => console.log(id); // new ref each render
  return items.map(item => <Row key={item.id} item={item} onClick={handleClick} />);
}

// ✅ After – stable handler; Row only re-renders when its own item changes
const Row = memo(({ item, onClick }: RowProps) => (
  <li onClick={() => onClick(item.id)}>{item.name}</li>
));

function List({ items }: { items: Item[] }) {
  const handleClick = useCallback((id: string) => console.log(id), []);
  return items.map(item => <Row key={item.id} item={item} onClick={handleClick} />);
}

Prefer derived data outside render

// ❌ Before – recomputes on every render
function Summary({ orders }: { orders: Order[] }) {
  const total = orders.reduce((sum, o) => sum + o.amount, 0); // runs every render
  return <p>Total: {total}</p>;
}

// ✅ After – recomputes only when orders changes
function Summary({ orders }: { orders: Order[] }) {
  const total = useMemo(() => orders.reduce((sum, o) => sum + o.amount, 0), [orders]);
  return <p>Total: {total}</p>;
}

Additional patterns

Split rows: extract list rows into memoized components with narrow props.
Defer heavy rendering: lazy-render or collapse expensive content until expanded.

Profiling Validation Steps

Open React DevTools → Profiler tab.
Click Record, perform the slow interaction, then Stop.
Switch to Flamegraph view; any bar labeled with a component and time > ~16 ms is a candidate.
Use Ranked chart to sort by self render time and target the top offenders.
Apply one optimization at a time, re-record, and compare render counts and durations against the baseline.

Example Reference

Load references/examples.md when the user wants a concrete refactor example.

react-component-performance

React Component Performance

Overview

Workflow

Checklist

Optimization Patterns

Isolate ticking state

Stabilize callbacks with useCallback + memo

Prefer derived data outside render

Additional patterns

Profiling Validation Steps

Example Reference

Related Skills

skill-creator

skill-creator

1password

himalaya

React Component Performance

Overview

Workflow

Checklist

Optimization Patterns

Isolate ticking state

Stabilize callbacks with useCallback + memo

Prefer derived data outside render

Additional patterns

Profiling Validation Steps

Example Reference

Related Skills

skill-creator

skill-creator

1password

himalaya

Related Skills

skill-creator

skill-creator

1password

himalaya

Stabilize callbacks with `useCallback` + `memo`

Stabilize callbacks with `useCallback` + `memo`