useMemo hook in React - Step-by-Step Execution

Concept Flow - useMemo hook

Component Render Start

↓

Evaluate Dependencies

↓

Dependencies Changed?

No→Return Cached Value

Yes↓

Run Expensive Function

↓

Cache Result

↓

Render with Memoized Value

↓

Component Render End

This flow shows how useMemo checks dependencies to decide if it should reuse a cached value or recompute it.

Execution Sample

React

const memoValue = useMemo(() => computeExpensive(a, b), [a, b]);
return <div>{memoValue}</div>;

This code memoizes the result of computeExpensive based on inputs a and b to avoid recalculating unnecessarily.

Execution Table

Step	a	b	Dependencies Changed?	Action	memoValue
1 (Initial Render)	2	3	Yes (no previous)	Run computeExpensive(2,3)	6
2 (Re-render, a=2, b=3)	2	3	No	Return cached 6	6
3 (Re-render, a=4, b=3)	4	3	Yes	Run computeExpensive(4,3)	7
4 (Re-render, a=4, b=5)	4	5	Yes	Run computeExpensive(4,5)	9
5 (Re-render, a=4, b=5)	4	5	No	Return cached 9	9
6 (Re-render, a=2, b=5)	2	5	Yes	Run computeExpensive(2,5)	7

💡 No recomputation occurs for memoValue when dependencies do not change.

Variable Tracker

Variable	Start	After 1	After 2	After 3	After 4	After 5	After 6
a	2	2	2	4	4	4	2
b	3	3	3	3	5	5	5
memoValue	undefined	6	6	7	9	9	7

Key Moments - 3 Insights

Why does useMemo run the function on the first render even if dependencies exist?

On the first render, there is no cached value, so useMemo must run the function to get the initial memoValue (see Step 1 in execution_table).

What happens if dependencies do not change between renders?

useMemo returns the cached memoValue without running the function again, saving work (see Steps 2 and 5 in execution_table).

Why must dependencies be listed correctly in the array?

If dependencies are missing or incorrect, useMemo may not update memoValue when inputs change, causing stale or wrong results (compare Steps 3 and 6).

Visual Quiz - 3 Questions

Look at the execution_table, what is memoValue at Step 3?

A 7

B 9

C 6

D undefined

💡 Hint

Check the memoValue column at Step 3 in the execution_table.

At which step does useMemo return a cached value without recomputing?

A Step 1

B Step 3

C Step 5

D Step 6

💡 Hint

Look for 'Dependencies Changed?' = No and 'Action' = Return cached in execution_table.

If dependency 'a' changes from 4 to 2 at Step 6, what happens?

A useMemo returns cached value from Step 5

B useMemo recomputes memoValue

C useMemo skips update

D Component crashes

💡 Hint

See Step 6 where 'a' changes and 'Dependencies Changed?' is Yes.

Concept Snapshot

useMemo hook caches a computed value.
Syntax: useMemo(() => compute(), [deps])
Runs compute only if dependencies change.
Helps avoid expensive recalculations.
Returns cached value otherwise.
Use correct dependencies array.

Full Transcript

The useMemo hook in React helps optimize performance by caching the result of a function. When a component renders, useMemo checks if its dependencies have changed. If yes, it runs the function and stores the result. If not, it returns the cached result to avoid unnecessary work. On the first render, it always runs the function because no cached value exists yet. Dependencies must be listed correctly to ensure updates happen when needed. This behavior reduces expensive recalculations and improves efficiency in React components.