memo, useMemo, useCallback

React.memo skips a child’s re-render only when its next props are shallow-equal to the previous ones. By default a child re-renders whenever its parent does, regardless of props. memo changes that: before re-rendering, React shallow-compares each prop with Object.is. Primitives compare by value, so a number or string prop that didn’t change passes. But objects, arrays, and functions compare by reference — a fresh literal every render is never Object.is-equal to last render’s, so the comparison fails and the child renders anyway.

const Row = React.memo(function Row({ user, onSelect }: {
  user: User;
  onSelect: (id: string) => void;
}) {
  return <li onClick={() => onSelect(user.id)}>{user.name}</li>;
});
// memo's promise: skip re-render IF user AND onSelect are reference-stable

So memo is necessary but not sufficient. It only buys you a skip when every non-primitive prop arrives with a stable identity. The next two tools are how you supply that stability.

useMemo caches the identity of a computed value; useCallback caches the identity of a function — both keyed by a dependency array. They are the supply side of the contract. useMemo(fn, deps) runs fn and returns the same reference until a dep changes. useCallback(fn, deps) returns the same function reference until a dep changes — it’s literally useMemo(() => fn, deps). Their point is almost never raw compute speed; it is referential stability so that a downstream memo (or an effect’s dependency check) sees “same value, skip”.

function UserList({ users, onSelect }: Props) {
  // stable identity → a memo'd <Row onSelect> can skip
  const handleSelect = useCallback((id: string) => onSelect(id), [onSelect]);
  // stable identity → a memo'd consumer of `visible` can skip
  const visible = useMemo(() => users.filter((u) => u.active), [users]);
  return visible.map((u) => <Row key={u.id} user={u} onSelect={handleSelect} />);
}

If you write const handleSelect = (id) => onSelect(id) instead, you mint a new function every render, and any memo downstream comparing that prop fails every time. The cache is only as stable as the references you feed it.

The trio is one system: a memo’d child needs stable props, and stable props are useless without a memo’d child. Picture the chain. useCallback/useMemo produce stable references → those references are passed as props → React.memo shallow-compares them and, finding them equal, skips. Remove memo and the child re-renders regardless, so the stable identity bought nothing. Remove the useCallback/useMemo and the prop changes identity every render, so memo’s comparison always fails and it never skips. Every link must be present or the whole chain is a no-op.

// ❌ broken chain: stable handler, but Row is NOT memo'd → renders anyway
const handleSelect = useCallback(fn, [fn]);
return <PlainRow onSelect={handleSelect} />; // useCallback does literally nothing here

// ❌ broken chain: Row IS memo'd, but handler is a fresh literal → never skips
return <MemoRow onSelect={(id) => onSelect(id)} />;

// ✅ closed chain: memo'd child + stable prop → Row skips when user/onSelect unchanged
return <MemoRow user={user} onSelect={handleSelect} />;

This is the senior reframing: you don’t “add a useCallback”. You either complete a memoization chain or you don’t have one.

The two failure modes: a memoization with no memo’d consumer, and a dependency array that’s wrong. The first is pure waste — a useCallback or useMemo whose result flows only into a plain (un-memo’d) component, an intrinsic element like <button onClick={...}>, or nothing render-relevant at all. It costs an allocation and a deps check every render and skips zero renders. The second is subtler and worse: a dependency array that omits a value the closure reads gives you a stale cached value (a callback that calls last render’s onSelect), while an array containing an unstable value (an inline object, a value that changes every render) invalidates the cache every render, so you pay all the memoization cost and get none of the benefit.

// ❌ stale: handler closes over `query` but deps omit it → fires the old query
const search = useCallback(() => fetchResults(query), []); // bug: missing `query`

// ❌ self-defeating: `options` is a new object each render → useMemo recomputes always
const opts = { sort: "name" };
const sorted = useMemo(() => sortBy(users, opts), [users, opts]); // opts breaks it

The lint rule react-hooks/exhaustive-deps catches the stale case. Nothing catches the un-memo’d-consumer case for you — it’s a reasoning failure, not a syntax one, which is why “memoization is a system” has to be a habit, not a checklist item.