useMemo hook in React - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the useMemo hook in React?

The useMemo hook helps to remember (or memoize) a value so React does not have to recalculate it on every render, improving performance.

beginner

How do you use useMemo to optimize a slow calculation?

Wrap the slow calculation inside useMemo(() => slowCalculation(), [dependencies]). React will only recalculate when dependencies change.

intermediate

What happens if you pass an empty dependency array [] to useMemo?

The memoized value is calculated once on the first render and never recalculated again, unless the component unmounts and remounts.

intermediate

Can useMemo replace useState or useEffect?

No. useMemo only memoizes values. useState manages state, and useEffect runs side effects. They serve different purposes.

intermediate

Why should you not overuse useMemo?

Because memoization itself has a cost. Use it only when a calculation is expensive and the saved work improves performance noticeably.

What does useMemo return?

A A side effect callback

B A function to update state

C A memoized value

D A component

useMemo returns the memoized value from the function you provide.

When does useMemo recalculate the memoized value?

A Every render

B Only when dependencies change

C Only on first render

D Never

It recalculates only when one or more dependencies in the array change.

Which of these is a good use case for useMemo?

A Memoizing a heavy calculation based on props

B Running an API call

C Replacing <code>useState</code> for state management

D Memoizing a simple string constant

useMemo is best for expensive calculations that depend on props or state.

What happens if you omit the dependency array in useMemo?

A Memoization is disabled; recalculates every render

B Memoizes forever

C Causes an error

D Memoizes only once

Without dependencies, React recalculates the value every render, so memoization is ineffective.

Which hook is best to run side effects, not memoize values?

A useCallback

B useMemo

C useState

D useEffect

useEffect is designed to run side effects like data fetching or subscriptions.

Explain how useMemo helps improve React app performance.

Think about when React re-renders and how <code>useMemo</code> saves work.

Describe the difference between useMemo and useEffect.

One remembers values, the other runs code after render.

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