Optimize React Component Performance

Diagnoses and fixes React render performance problems without changing UI behavior: identifies render hotspots, isolates expensive updates from fast-changing state, and applies targeted optimizations. It follows a six-step 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 with memoization where it pays off, reduce expensive work, then validate in React DevTools Profiler by recording the interaction and inspecting the Flamegraph for components rendering longer than ~16ms against a pre-optimization baseline. A ten-item checklist covers measuring baselines, finding state-churn sources such as timers, scroll, input, or animation, splitting ticking state into a child component, memoizing leaf rows only when props are stable, stabilizing handlers and derived values with useCallback/useMemo, avoiding derived work inside render, virtualizing long lists, using stable keys instead of array index, auditing effect dependency arrays, and watching for layout thrash or large Markdown/diff renders. It demonstrates three before/after optimization patterns with full code: isolating a ticking timer into its own child component so a heavy list no longer re-renders every second, stabilizing a click handler with useCallback so a memo-wrapped row only re-renders when its own item changes, and moving a derived total computation into useMemo so it recomputes only when its dependency changes.

Use it when a user asks to profile or improve a slow React component, or needs to reduce re-renders, list lag, or expensive render work in a React UI. The skill is scoped to render-performance diagnosis and targeted fixes - it explicitly defers deeper worked examples to a separate references/examples.md file rather than duplicating that content inline, and does not claim to substitute for environment-specific validation, testing, or expert review of the resulting changes.

Input is a description of a slow React component or interaction, or profiler data from an existing slowdown. Output is a set of targeted code changes following the documented patterns, for example:

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

plus a validation pass comparing Profiler Flamegraph render counts and durations before and after the change.

Built around React's own performance primitives - memo, useCallback, useMemo, and the React DevTools Profiler's Flamegraph and Ranked chart views - with no external libraries required beyond React itself.

Frontend engineers diagnosing and fixing React re-render performance issues - slow lists, laggy interactions, or components that re-render more than their underlying data actually changes.