Memoisation

React.memo, useMemo and useCallback skip work when inputs have not changed. They help when a render is measurably slow and its inputs are stable, and add cost and noise everywhere else.

What a session covers

The tutor works through these with you, in conversation and code. A session ends when you have shown them, not when a video does.

Explain what React.memo, useMemo and useCallback each skip
Memoise a measurably slow component and verify it skips renders
Spot the inline callback that defeats React.memo

In practice

A few lines that show Memoisation doing its job.

TSX

const Row = React.memo(function Row({ item, onSelect }: RowProps) {
  return <li onClick={() => onSelect(item.id)}>{item.label}</li>;
});

function List({ items }: { items: Item[] }) {
  const sorted = useMemo(() => [...items].sort(byLabel), [items]);
  const onSelect = useCallback((id: string) => select(id), []);
  return <ul>{sorted.map((i) => <Row key={i.id} item={i} onSelect={onSelect} />)}</ul>;
}

The common mistake

Watch for

Wrapping a child in React.memo but passing it a fresh inline callback or object each render. The props are never equal, so the memo never skips, and you have paid for the comparison for nothing.

What to know first

Your roadmap puts these before Memoisation, unless you already know them.

How it stays learned

Once a session shows you understand Memoisation, it comes back for review. Each review takes a minute and tells the memory model how well you still know it.

Day 3First recall, while it is fresh
Day 7Second, a week on
Day 18Last, when it has settled

Where it leads

Topics that build on Memoisation.

Profiling renders

Profiling renders

Next in the moduleCode splitting →