Performance Optimization & Profiling

React updates UI by running render functions and comparing the returned JSX against the previous virtual DOM tree (reconciliation). Unnecessary renders occur when parent components re-render, forcing all child components to re-render even if their props have not changed.

Before adding performance hooks, profile your component tree using the React DevTools Profiler to find actual bottlenecks. Wrap expensive child components in React.memo, memoize calculated values with useMemo, and memoize event handler references with useCallback. Never optimize prematurely — memoization overhead can exceed re-render costs for trivial components.

Before

Un-memoized Object Literal Prop Re-creating on Every Render

1// ❌ New object reference created every render -> breaks child React.memo!2export function Parent() {3  const [count, setCount] = useState(0);4  return <BigList config={{ filter: 'active' }} onClick={() => setCount(c => c + 1)} />;5}

After

Memoized References for Stable Props

1export function Parent() {2  const [count, setCount] = useState(0);3 4  const config = useMemo(() => ({ filter: 'active' }), []);5  const handleClick = useCallback(() => setCount(c => c + 1), []);6 7  return <BigList config={config} onClick={handleClick} />;8}

Exercise

Profile a slow list component and apply React.memo and useCallback to prevent unnecessary item re-renders.

Check your understanding

What is the difference between useMemo and useCallback?Show answerHide answer
Answer
useMemo caches the result of evaluating a calculation function; useCallback caches the function instance reference itself.
Why does passing an inline arrow function prop bypass React.memo?Show answerHide answer
Answer
Inline arrow functions instantiate a new reference on every render, failing shallow prop equality checks.