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.

Practice

1. What is the main purpose of the useMemo hook in React?

easy

A. To remember a computed value between renders and recalculate only if dependencies change

B. To fetch data from an API asynchronously

C. To manage component state

D. To handle side effects like subscriptions or timers

Solution

1. Step 1: Understand what useMemo does

   useMemo stores a value and recalculates it only when its dependencies change, avoiding repeated work.

2. Step 2: Compare with other hooks

   Fetching data or managing state are done by other hooks like useEffect or useState, not useMemo.

3. Final Answer:

   To remember a computed value between renders and recalculate only if dependencies change -> Option A

4. Quick Check:

   useMemo = memoize value [OK]

Hint: Remember: useMemo caches values, not effects or state [OK]

Common Mistakes:

• Confusing useMemo with useEffect
• Thinking useMemo manages state
• Assuming useMemo runs every render

2. Which of the following is the correct syntax to use useMemo in a React functional component?

easy

A. const memoizedValue = useMemo(computeValue(), []);

B. const memoizedValue = useMemo(computeValue, dependencies);

C. const memoizedValue = useMemo(() => computeValue(), [dependencies]);

D. const memoizedValue = useMemo(() => computeValue, [dependencies]);

Solution

1. Step 1: Recall correct useMemo syntax

   useMemo takes a function returning the value and an array of dependencies: useMemo(() => value, [deps]).

2. Step 2: Analyze options

   const memoizedValue = useMemo(() => computeValue(), [dependencies]); correctly uses an arrow function and dependency array. Others either call the function immediately or miss the arrow function.

3. Final Answer:

   const memoizedValue = useMemo(() => computeValue(), [dependencies]); -> Option C

4. Quick Check:

   useMemo syntax = arrow function + deps array [OK]

Hint: useMemo needs a function and dependencies array [OK]

Common Mistakes:

• Calling the compute function immediately inside useMemo
• Passing dependencies without an array
• Passing function reference without wrapping in arrow function

3. Consider this React code snippet:

const [count, setCount] = useState(0);
const double = useMemo(() => count * 2, [count]);

return <div>{double}</div>;

What will be displayed when count is 3?

medium

A. 6

B. 3

C. 0

D. NaN

Solution

1. Step 1: Understand the useMemo calculation

   The double value is computed as count * 2, and recalculated only when count changes.

2. Step 2: Substitute count value

   When count is 3, double becomes 3 * 2 = 6.

3. Final Answer:

   6 -> Option A

4. Quick Check:

   count 3 times 2 = 6 [OK]

Hint: Multiply count by 2 inside useMemo [OK]

Common Mistakes:

• Confusing count with double
• Ignoring dependency array effect
• Assuming useMemo returns a function

4. Identify the problem in this code using useMemo:

const memoizedValue = useMemo(() => expensiveCalc(), []);

// Later in code
const result = memoizedValue();

medium

A. Dependency array is missing, so useMemo recalculates every render

B. Calling memoizedValue as a function causes an error because it stores a value, not a function

C. expensiveCalc is not defined

D. useMemo should not be used with functions

Solution

1. Step 1: Understand what useMemo returns

   useMemo returns the memoized value, not a function, so calling it as a function causes an error.

2. Step 2: Analyze the code usage

   The code calls memoizedValue(), but memoizedValue is the result of expensiveCalc(), not a function.

3. Final Answer:

   Calling memoizedValue as a function causes an error because it stores a value, not a function -> Option B

4. Quick Check:

   useMemo returns value, not callable function [OK]

Hint: useMemo returns value, don't call it like a function [OK]

Common Mistakes:

• Calling the memoized value as a function
• Forgetting to pass dependencies
• Confusing useMemo with useCallback

5. You have a component that filters a large list of users by a search term. Which use of useMemo best improves performance by avoiding unnecessary recalculations?

hard

A. const filteredUsers = users.filter(u => u.name.includes(searchTerm));

B. const filteredUsers = useMemo(() => users.filter(u => u.name.includes(searchTerm)), []);

C. const filteredUsers = useMemo(() => users.filter(u => u.name.includes(searchTerm)));

D. const filteredUsers = useMemo(() => users.filter(u => u.name.includes(searchTerm)), [users, searchTerm]);

Solution

1. Step 1: Identify dependencies for filtering

   The filtered list depends on both users and searchTerm, so both must be in the dependency array.

2. Step 2: Evaluate each option

   const filteredUsers = useMemo(() => users.filter(u => u.name.includes(searchTerm)), [users, searchTerm]); correctly recalculates only when users or searchTerm change. const filteredUsers = useMemo(() => users.filter(u => u.name.includes(searchTerm)), []); never recalculates after first render. const filteredUsers = useMemo(() => users.filter(u => u.name.includes(searchTerm))); misses dependencies array. const filteredUsers = users.filter(u => u.name.includes(searchTerm)); recalculates every render.

3. Final Answer:

   const filteredUsers = useMemo(() => users.filter(u => u.name.includes(searchTerm)), [users, searchTerm]); -> Option D

4. Quick Check:

   Include all dependencies in useMemo array [OK]

Hint: Always list all variables used inside useMemo in dependencies [OK]

Common Mistakes:

• Leaving dependency array empty when dependencies exist
• Omitting dependency array causing recalculation every render
• Not using useMemo and filtering every render