React Component Performance

React Component Performance

Overview

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

When to Use

• When the user asks to profile or improve a slow React component.
• When you need to reduce re-renders, list lag, or expensive render work in React UI.

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.

// ❌ 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

1. Open React DevTools → Profiler tab. 2. Click Record, perform the slow interaction, then Stop. 3. Switch to Flamegraph view; any bar labeled with a component and time > ~16 ms is a candidate. 4. Use Ranked chart to sort by self render time and target the top offenders. 5. 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.

Examples

Isolate a ticking timer from a long list

Scenario: A message list re-renders every second because a timer (elapsedMs) lives in the parent component. This causes visible jank on large lists.

Goal: Keep UI identical but limit re-renders to the timer area.

Before (problematic pattern):

function Messages({ items, isThinking, processingStartedAt }) {
  const [elapsedMs, setElapsedMs] = useState(0);

  useEffect(() => {
    if (!isThinking || !processingStartedAt) {
      setElapsedMs(0);
      return;
    }
    setElapsedMs(Date.now() - processingStartedAt);
    const interval = window.setInterval(() => {
      setElapsedMs(Date.now() - processingStartedAt);
    }, 1000);
    return () => window.clearInterval(interval);
  }, [isThinking, processingStartedAt]);

  return (
    <div>
      {items.map((item) => (
        <MessageRow key={item.id} item={item} />
      ))}
      <div>{formatDurationMs(elapsedMs)}</div>
    </div>
  );
}

After (isolated ticking state):

type WorkingIndicatorProps = {
  isThinking: boolean;
  processingStartedAt?: number | null;
};

const WorkingIndicator = memo(function WorkingIndicator({
  isThinking,
  processingStartedAt = null,
}: WorkingIndicatorProps) {
  const [elapsedMs, setElapsedMs] = useState(0);

  useEffect(() => {
    if (!isThinking || !processingStartedAt) {
      setElapsedMs(0);
      return;
    }
    setElapsedMs(Date.now() - processingStartedAt);
    const interval = window.setInterval(() => {
      setElapsedMs(Date.now() - processingStartedAt);
    }, 1000);
    return () => window.clearInterval(interval);
  }, [isThinking, processingStartedAt]);

  return <div>{formatDurationMs(elapsedMs)}</div>;
});

function Messages({ items, isThinking, processingStartedAt }) {
  return (
    <div>
      {items.map((item) => (
        <MessageRow key={item.id} item={item} />
      ))}
      <WorkingIndicator
        isThinking={isThinking}
        processingStartedAt={processingStartedAt}
      />
    </div>
  );
}

Why it helps: Only the WorkingIndicator subtree re-renders every second. The list remains stable unless its props change.

Optional follow-ups:

• Wrap MessageRow in memo if props are stable.
• Use useCallback for handlers passed to rows to avoid re-render churn.
• Consider list virtualization if the list is very large.