Optimize React Component Performance

React Component Performance diagnoses slow React components and applies targeted fixes. It identifies render hotspots, isolates expensive updates and optimizes without changing UI behavior. It comes from the Dimillian/Skills collection under the MIT license.

The workflow has six steps: reproduce or describe the slowdown, identify what triggers re-renders (state updates, prop churn, effects), isolate fast-changing state from heavy subtrees, stabilize props and handlers and memoize where it pays off, reduce expensive work (computation, DOM size, list length), and validate. Validation means opening React DevTools Profiler, recording the interaction, inspecting the Flamegraph for components that render longer than about 16 ms, and comparing against a baseline recording taken before the optimization.

A working checklist backs this up:

• Measure: use the Profiler or log renders, and capture a baseline first.
• Find churn: look for state updated on a timer, scroll, input or animation.
• Split: move ticking state into a child and keep heavy lists static.
• Memoize: wrap leaf rows in memo only when their props are stable.
• Stabilize props: use useCallback and useMemo for handlers and derived values.
• Avoid derived work in render: precompute, or compute inside memoized helpers.
• Control list size: window or virtualize long lists and do not render hidden items.
• Keys: keep them stable, and avoid the array index when order can change.
• Effects: verify dependency arrays and avoid effects that re-run on every render.
• Style and layout: watch for layout thrash and large Markdown or diff renders.

Three optimization patterns are worked through with before and after code. Isolating ticking state moves a timer counter into a child component so the parent list no longer re-renders every second. Stabilizing callbacks pairs useCallback with a memo row so a new handler reference on each render stops defeating the memoization. Preferring derived data outside render wraps an expensive reduction in useMemo so it recomputes only when its input changes:

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

Two more patterns are listed: split rows into memoized components with narrow props, and defer heavy rendering by lazy-rendering or collapsing expensive content until it is expanded.

Use it when asked to profile or improve a slow React component, or to reduce re-renders, list lag or expensive render work in a React UI. It is aimed at measured, targeted fixes: apply one optimization at a time, re-record and compare render counts and durations against the baseline.

Do not use it when the task falls outside this scope. It is not a substitute for environment-specific validation, testing or expert review, and it should stop and ask for clarification when required inputs, permissions, safety boundaries or success criteria are missing.

Inputs are the slow component or interaction and a way to reproduce it. The profiling procedure is concrete: open the Profiler tab in React DevTools, click Record, perform the slow interaction and Stop, switch to the Flamegraph and treat any component bar above roughly 16 ms as a candidate, then use the Ranked chart to sort by self render time and target the top offenders. Outputs are refactored component code and a before and after comparison of render counts and durations.

A bundled example reference covers a message list that re-rendered every second because an elapsed-time counter lived in the parent. The fix extracts a memoized WorkingIndicator component that owns the timer, keeping the interface identical while only that small subtree re-renders each second. Suggested follow-ups are wrapping MessageRow in memo if its props are stable, using useCallback for row handlers, and considering list virtualization for very large lists.

It works with React DevTools Profiler and standard React hooks: memo, useCallback, useMemo, useState and useEffect.

It suits React developers who face lag in lists, dashboards or timers and want a repeatable measure, fix and verify routine instead of guessing at optimizations.