Memoization — Series 3

Preview — 3 of 10 questions

With the React Compiler enabled, what changes, and do you still write manual memoization?

javascript

// No useMemo / useCallback / React.memo anywhere
function ProductGrid({ products, filter }) {
  const visible = products.filter((p) => p.tag === filter);
  return visible.map((p) => <Card key={p.id} product={p} />);
}

AThe compiler replaces the virtual DOM with direct DOM updates

BThe compiler only works in production and does nothing in development

CThe React Compiler automatically inserts memoization equivalent to useMemo/useCallback/React.memo at build time, based on a static analysis of what each value depends on — so idiomatic code gets fine-grained memoization for free. You mostly stop writing manual memo hooks; they remain useful for cases the compiler bails out of (code that breaks the Rules of React) or for semantics it cannot infer

DIt requires rewriting every component as a class

Why is this deep-equality comparator often a net loss?

javascript

const Row = React.memo(RowImpl, (prev, next) => JSON.stringify(prev) === JSON.stringify(next));

AJSON.stringify on every prop set, every render attempt, is itself work — for large props it can cost more than the re-render it prevents. It also silently breaks on functions, undefined, Date, circular refs, and key ordering. A targeted comparator that checks only the few fields that matter (prev.id === next.id && prev.status === next.status) is both cheaper and correct

BCustom comparators are not supported by React.memo

CIt makes the component render twice

DJSON.stringify is asynchronous

The filtered array is recomputed on every render even when todos and filter are unchanged. How do you fix it, and why does it matter?

javascript

function useVisibleTodos() {
  const todos = useStore((s) => s.todos);
  const filter = useStore((s) => s.filter);
  return todos.filter((t) => (filter === 'all' ? true : t.status === filter));
}

ACall useStore once instead of twice

BMove the filter into the store's state

CIt doesn't matter — filtering is cheap

DWrap the derivation in useMemo(() => todos.filter(...), [todos, filter]). Even if the filter itself is fast, the result is a new array reference each render, so any React.memo child receiving it re-renders, and any useEffect depending on it re-runs. Memoizing keeps the reference stable while the inputs are stable (this is what libraries like Reselect formalize)

Answer all 10 questions (7 more), see explanations for every answer, and track your score.