Caching calculations with useMemo in code
const visible = useMemo(
() => tickets.filter((t) => t.status === status),
[tickets, status],
);Read the example from data and control flow to the resulting UI. Keep the component boundary small.
Back to week 2
Topic
Caching calculations with useMemo
Definition
useMemo is a React Hook that caches the result of a calculation between re-renders and recomputes only when its listed dependencies change.
In simpler words
If a calculation is expensive, remember the last answer until the inputs that matter change — do not store that answer in another useState.
Memoized derived values, dependency lists, and when a plain calculation during render is enough.
After this you can
- Cache expensive derived lists or objects without duplicating them into state.
- Explain the trade-off to a teammate using a small example.
- Name at least one common bug pattern for this topic.
Understand Caching calculations with useMemo
Memoized derived values, dependency lists, and when a plain calculation during render is enough.
Start by identifying which value or browser behavior changes. Then describe the UI from that current input instead of editing the DOM as a separate source of truth.
Apply Caching calculations with useMemo
Keep rendering as a calculation. Put user-triggered changes in event handlers, preserve UI memory in state, and reserve external synchronization for Effects or the server-state layer.
Name values by their UI meaning, test the loading and error path when data is remote, and avoid keeping two editable copies of the same value.
Ask before adding code: is this local UI memory, shared client state, or Nest-owned server state?
Where bugs hide
Definition
High-bug areas are places where a small API misuse looks correct but produces stale UI, duplicate work, or silent failures.
In simpler words
Each mistake below shows Wrong vs Right code — compare them side by side.
When something misbehaves, match the symptom to a pattern below before rewriting the feature.
Prefer fixing the ownership or update path over adding another Effect or sync step.
Mistake: useMemo for cheap work by default
// Wrong
const label = useMemo(() => `Ticket #${id}`, [id]);
// Right
const label = `Ticket #${id}`;Memo has a cost. Prefer a normal expression unless profiling or identity stability requires it.
Mistake: Omit a dependency you read inside
// Wrong
const filtered = useMemo(() => items.filter(matches), [items]);
// matches changes but is omitted
// Right
const filtered = useMemo(() => items.filter(matches), [items, matches]);Like Effects, the dependency list must include every reactive value you read.
Mistake: Mirror useMemo into useState + Effect
// Wrong
const [filtered, setFiltered] = useState([]);
useEffect(() => {
setFiltered(items.filter(matches));
}, [items, matches]);
// Right
const filtered = useMemo(() => items.filter(matches), [items, matches]);
// or just: items.filter(matches) if cheapDerived data belongs in render (optionally memoized), not in synchronized state.
Live playground
Caching calculations with useMemo sandbox
Change one input at a time and predict the next render.
Plain filter runs every render. useMemo recalculates only when tickets or query change — toggle theme (unrelated) and compare the counters.
theme=light · plain path renders=1 · useMemo calc runs=1 · matches=40/40
const visible = useMemo( () => tickets.filter(t => t.title.includes(query)), [tickets, query], );
Keep in mind
- Keep the formal definition in mind; it explains which tool belongs where.
- Prefer one source of truth over synchronized copies of the same value.
- When behavior surprises you, trace: input → update → render → committed UI.
- Study the Wrong vs Right examples in “Where bugs hide” before you merge.
Test
Check your understanding
At least 10 questions — mix of concept, syntax, practical, and logic. Score ≥ 80% (enforced by the API) to save progress.
Checking your session…
12 questions · concept 3 · syntax 3 · practical 3 · logic 3