Memoization

Learning objectives#

• Skip re-rendering a component with memo
• Cache an expensive calculation with useMemo
• Keep a function identity stable with useCallback
• Know when memoization is not worth it

Explanation#

memo(Component) re-renders the component only when its props change (compared shallowly with Object.is).

useMemo(() => compute(a, b), [a, b]) recalculates only when a or b changes. Use it for genuinely expensive work, like filtering 50,000 rows.

useCallback(fn, deps) returns the same function between renders. It matters when the function is a prop of a memo component or a dependency of an effect.

memo is defeated by new objects and functions created on every render: <Row style={{}} onClick={() => ...} /> always has “new” props. That is why memo, useMemo and useCallback are often used together.

The React Compiler (available for React 19) memoizes automatically at build time. In projects that use it, you rarely write these hooks by hand.

Syntax#

1const Row = memo(function Row({ item, onSelect }) { ... });
2

3const visible = useMemo(() => items.filter(matches), [items, query]);
4const handleSelect = useCallback(id => setSelected(id), []);

Code example: Filtering a big list without wasted work#

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

3const ITEMS = Array.from({ length: 5000 }, (_, i) => ({ id: i, name: `Product ${i}`, price: (i * 37) % 1000 }));
4

5let rowRenders = 0;
6const Row = memo(function Row({ item, selected, onSelect }) {
7  rowRenders += 1;
8  return (
9    <li onClick={() => onSelect(item.id)} style={{ fontWeight: selected ? 'bold' : 'normal' }}>
10      {item.name} — ₹{item.price}
11    </li>
12  );
13});
14

15export default function BigList() {
16  const [query, setQuery] = useState('');
17  const [selectedId, setSelectedId] = useState(null);
18  const [darkMode, setDarkMode] = useState(false);
19

20  const visible = useMemo(                                   // re-filter only when query changes
21    () => ITEMS.filter(i => i.name.includes(query)).slice(0, 50),
22    [query],
23  );
24

25  const handleSelect = useCallback(id => setSelectedId(id), []);   // same function every render
26

27  return (
28    <div style={{ background: darkMode ? '#111' : '#fff', color: darkMode ? '#eee' : '#111' }}>
29      <input value={query} onChange={e => setQuery(e.target.value)} aria-label="Filter" />
30      <label><input type="checkbox" checked={darkMode} onChange={e => setDarkMode(e.target.checked)} /> Dark</label>
31      <ul>
32        {visible.map(item => (
33          <Row key={item.id} item={item} selected={item.id === selectedId} onSelect={handleSelect} />
34        ))}
35      </ul>
36      <small>Row renders so far: {rowRenders}</small>
37    </div>
38  );
39}

The first render draws 50 rows. Toggling “Dark” re-renders BigList but none of the 50 Row components (their props did not change) and the filter does not re-run. Selecting a row re-renders only the two rows whose selected prop changed. Typing in the filter re-runs the filter once per change.

This example is illustrative. Copy or download it and run it in your own environment; the expected output is shown above.

Step-by-step explanation#

1. Row is wrapped in memo, so it skips rendering when its props are unchanged.
2. useMemo caches the filtered list; toggling dark mode does not recompute it.
3. useCallback keeps handleSelect identical across renders, so memo sees the same onSelect prop.
4. Without useCallback, a new arrow function every render would make every Row re-render.

Real-world use case#

Common mistakes#

Best practices#

• Profile first, memoise second
• Combine memo with stable props
• Complete dependency arrays (use the ESLint rule)
• Consider the React Compiler

Remember this#

Practice exercise#

1import { useMemo, useState } from 'react';
2

3const CART = Array.from({ length: 10000 }, (_, i) => ({ id: i, price: 10, qty: 1 }));
4

5export default function CartTotal() {
6  const [notes, setNotes] = useState('');
7  const total = useMemo(() => CART.reduce((sum, i) => sum + i.price * i.qty, 0), []);
8  return (
9    <>
10      <p>Total: ₹{total}</p>   {/* ₹100000 */}
11      <textarea value={notes} onChange={e => setNotes(e.target.value)} aria-label="Notes" />
12    </>
13  );
14}

Mini quiz#

Want more? Practise all React MCQs · React interview questions

Related topics#

My notes#

Saved in this browser.