⚡ Performance Optimization with Memoization

How React Re-renders

To optimize rendering you first have to understand it. React re-renders in three situations:

1. A component's own state changes.
2. A component's props change.
3. Its parent re-renders — which, by default, re-renders all of its children, whether or not their props changed.

👨‍👩‍👧 A useful analogy: React's cascade is like a family getting ready in the morning. If a parent decides to change outfits (state change), every child at least has to check whether they need to change too — even the ones who end up wearing the same thing.

For small apps this is completely fine — a re-render is cheap, and React only touches the real DOM where output actually differs. The trouble appears in deep trees or lists where an expensive child re-renders on every unrelated parent update.

What Is Memoization?

Memoization is a general programming technique: cache the result of an expensive computation and return the cached value when the same inputs come back. It's remembering the answer instead of recomputing it.

☕ Real-world analogy: A barista who keeps a few popular drinks pre-made serves them instantly (cached). Only when someone orders something different — or the pre-made batch goes stale — do they brew fresh. In React, the "same order" is "the same inputs," and "stale" is "a dependency changed."

In React, memoization does three jobs:

• Skip re-rendering a component whose props didn't change (React.memo).
• Skip recomputing an expensive value (useMemo).
• Keep a function or object referentially stable across renders (useMemo / useCallback).

React.memo for Components

React.memo wraps a component so React skips re-rendering it when its props haven't changed (by a shallow comparison). It's the tool for breaking the default cascade.

import { memo, useState } from 'react';

function ProfileCard({ user }) {
  console.log('ProfileCard rendered');
  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
}

// Memoized: re-renders only when the `user` prop reference changes
const MemoProfileCard = memo(ProfileCard);

function Dashboard() {
  const [user] = useState({ name: 'Jane', email: 'jane@example.com' });
  const [count, setCount] = useState(0);

  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>Clicked {count}</button>

      <ProfileCard user={user} />      {/* re-renders on every click */}
      <MemoProfileCard user={user} />  {/* skips — user is unchanged */}
    </div>
  );
}

Clicking the button changes count, re-rendering Dashboard. The plain ProfileCard re-renders needlessly; MemoProfileCard is skipped because its user reference is stable.

Custom comparison

By default memo shallow-compares props. For complex props you can supply your own comparator. It returns true when props are equal (skip render) — the opposite sense of the old shouldComponentUpdate:

const Row = memo(RowComponent, (prev, next) => {
  // return true => treat as equal => skip re-render
  return prev.id === next.id && prev.label === next.label;
});

The Referential-Equality Trap

Here's the gotcha that trips everyone up: React.memo alone often does nothing, because objects and functions are recreated on every render.

function Parent() {
  const [count, setCount] = useState(0);

  const user = { name: 'Jane', age: 30 };      // 🔴 new object each render
  const handleClick = () => console.log('hi');  // 🔴 new function each render

  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>

      {/* Re-renders every time despite memo — props are new references */}
      <MemoChild user={user} onClick={handleClick} />
    </div>
  );
}

Every click recreates user and handleClick. Because MemoChild compares by reference, it sees "new props" and re-renders anyway. React.memo is only as good as the stability of the props you feed it — which is exactly why useMemo and useCallback exist.

useMemo for Values

useMemo caches the result of a computation, recomputing only when its dependencies change. Use it for genuinely expensive calculations and to keep object/array props referentially stable.

import { useMemo } from 'react';

function Report({ rows, filter }) {
  // Recomputes only when rows or filter change — not on every render
  const summary = useMemo(() => {
    console.log('crunching numbers…');
    return computeExpensiveSummary(rows, filter);
  }, [rows, filter]);

  return <SummaryView data={summary} />;
}

And to fix the referential trap from the previous section — memoize the object so its reference stays stable:

function Parent() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('Jane');

  // Same reference until `name` changes
  const user = useMemo(() => ({ name, age: 30 }), [name]);

  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>
      <MemoChild user={user} />  {/* now genuinely skips on count changes */}
    </div>
  );
}

useCallback for Functions

useCallback is useMemo for functions: it returns the same function reference between renders until its dependencies change. Its main job is keeping callbacks stable when you pass them to memoized children.

import { useCallback } from 'react';

function Parent() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('Jane');

  // Stable reference until `name` changes
  const handleGreet = useCallback(() => {
    console.log(`Hi from ${name}`);
  }, [name]);

  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>
      <MemoButton onClick={handleGreet} label="Greet" />
    </div>
  );
}

When (and When Not) to Memoize

Memoization isn't free — every memo/useMemo/useCallback adds a comparison and stores a cached value in memory. Applied blindly, it can make code slower and harder to read.

⚠️ "Premature optimization is the root of all evil." Start without memoization. Measure. Add it only where the profiler shows a real, repeated cost.

Measuring Performance

Never optimize by guesswork. Measure first, so you fix a real bottleneck instead of a suspected one.

React DevTools Profiler

The Profiler tab in React DevTools is the primary tool:

• Record an interaction and see which components rendered.
• Read why each component rendered (props, state, parent).
• Compare render durations before and after a change.

Other tools

Hands-on: Optimize a Cart

function ShoppingCart() {
  const [items, setItems] = useState([
    { id: 1, name: 'Laptop', price: 999, quantity: 1 },
    { id: 2, name: 'Headphones', price: 99, quantity: 1 },
    { id: 3, name: 'Keyboard', price: 59, quantity: 1 },
  ]);
  const [coupon, setCoupon] = useState('');

  const total = items.reduce((s, i) => s + i.price * i.quantity, 0);
  const discount = coupon === 'SAVE10' ? total * 0.1 : 0;

  const updateQuantity = (id, qty) =>
    setItems(items.map(i => (i.id === id ? { ...i, quantity: qty } : i)));
  const removeItem = (id) => setItems(items.filter(i => i.id !== id));
  // ...renders CartItem for each item + a coupon input
}

import { memo, useCallback, useMemo, useState } from 'react';

const CartItem = memo(function CartItem({ item, updateQuantity, removeItem }) {
  return (
    <div className="cart-item">
      <h3>{item.name}</h3>
      <p>${item.price}</p>
      <input
        type="number" min="1" value={item.quantity}
        onChange={(e) => updateQuantity(item.id, Number(e.target.value))}
      />
      <p>Subtotal: ${(item.price * item.quantity).toFixed(2)}</p>
      <button onClick={() => removeItem(item.id)}>Remove</button>
    </div>
  );
});

function ShoppingCart() {
  const [items, setItems] = useState([
    { id: 1, name: 'Laptop', price: 999, quantity: 1 },
    { id: 2, name: 'Headphones', price: 99, quantity: 1 },
    { id: 3, name: 'Keyboard', price: 59, quantity: 1 },
  ]);
  const [coupon, setCoupon] = useState('');

  const total = useMemo(
    () => items.reduce((s, i) => s + i.price * i.quantity, 0),
    [items]
  );
  const discount = useMemo(
    () => (coupon === 'SAVE10' ? total * 0.1 : 0),
    [coupon, total]
  );
  const finalTotal = useMemo(() => total - discount, [total, discount]);

  // Empty deps: functional updaters mean these never need to change
  const updateQuantity = useCallback((id, qty) => {
    setItems(prev => prev.map(i => (i.id === id ? { ...i, quantity: qty } : i)));
  }, []);
  const removeItem = useCallback((id) => {
    setItems(prev => prev.filter(i => i.id !== id));
  }, []);

  return (
    <div className="shopping-cart">
      <h2>Your Cart</h2>
      {items.map(item => (
        <CartItem key={item.id} item={item}
                  updateQuantity={updateQuantity} removeItem={removeItem} />
      ))}
      <input value={coupon} onChange={(e) => setCoupon(e.target.value)}
             placeholder="Coupon code" />
      <p>Subtotal: ${total.toFixed(2)}</p>
      {discount > 0 && <p>Discount: -${discount.toFixed(2)}</p>}
      <p>Total: ${finalTotal.toFixed(2)}</p>
    </div>
  );
}

Summary & Quiz

📚 Further Reading

• React docs — memo
• React docs — useMemo
• React docs — useCallback
• React docs — React Compiler
• Kent C. Dodds — When to useMemo and useCallback

🚀 What's Next?

Local component state and memoization take you a long way, but large apps need shared, predictable state. Next we'll step into Redux Core Concepts — actions, reducers, and a single global store.