advanced · 23 minute study

Measure work before caching it

Memoization can help expensive repeated work, but often hides a more useful state or component-boundary fix.

Loading progressEvidence grows with practice

Useful preparation · 1 prerequisite

Use this as a map, not a lock. If these ideas are familiar, continue.

Keys tell React which entity keeps its state — Index or random keys can move editable row state to the wrong item or reset it unexpectedly.

First, build a mental model

Rendering computes descriptions. Memoization reuses previous work when its inputs match. It is a performance tool, not a way to make incorrect logic correct.

Measure the slow interaction and identify render, layout, network or computation cost.
Keep state near the components that need it.
useMemo caches a calculation; useCallback caches a function identity.
Memoized components still need correct props and accessible behavior; unstable dependencies can defeat reuse.

Read the codejsx · educational example

function Inventory({ items, query }) {
  const visible = useMemo(
    () => expensiveFilter(items, query),
    [items, query]
  );
  return <ItemList items={visible} />;
}
// First measure whether expensiveFilter is actually expensive.

Inputs
items and query determine the filtered result.
Reuse
A previous calculation may be reused when dependencies are unchanged.
Invalidate
Changing either dependency requires a new result.

Production thinking

Take this beyond the example.

Profile representative devices and data sizes. Optimize expensive paths with evidence, keep behavior tests, and stop when the user-visible target is met.

Sources and further reading

Your evidence

unseen is a local learning signal, not a credential or proof of production competence.

Explain the mental model, then explicitly acknowledge it. Opening a page is not evidence.

Supported retries can complete this lesson. Independent evidence and delayed review determine the skill stage.

Next lesson · Test what the user can do across state changes →