useMemo hook in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the useMemo hook from React.

React

import React, { [1] } from 'react';

Drag options to blanks, or click blank then click option'

AuseMemo

BuseState

CuseEffect

DuseRef

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing useMemo with useState or useEffect.

The useMemo hook is imported from React to memoize expensive calculations.

2fill in blank

medium

Complete the code to memoize the result of the expensiveFunction using useMemo.

React

const memoizedValue = useMemo(() => expensiveFunction(), [1]);

Drag options to blanks, or click blank then click option'

A[memoizedValue]

B[expensiveFunction]

C[value]

D[]

Attempts:

3 left

💡 Hint

Common Mistakes

Using the function itself as a dependency causing repeated calls.

Passing an empty array [] means the function runs only once on mount.

3fill in blank

hard

Fix the error in the useMemo usage to correctly memoize based on 'count'.

React

const memoizedValue = useMemo(() => computeValue(count), [1]);

Drag options to blanks, or click blank then click option'

A[]

Bcount

C[count]

D[computeValue]

Attempts:

3 left

💡 Hint

Common Mistakes

Passing a single variable instead of an array as dependency.

The dependency array must be an array containing count to update memoizedValue when count changes.

4fill in blank

hard

Fill both blanks to memoize the sum of a and b, updating only when a or b changes.

React

const sum = useMemo(() => [1] + [2], [a, b]);

Drag options to blanks, or click blank then click option'

Aa

Bb

Csum

DuseMemo

Attempts:

3 left

💡 Hint

Common Mistakes

Using the memoized variable inside its own calculation.

The sum is calculated by adding a and b inside useMemo.

5fill in blank

hard

Fill all three blanks to create a memoized object with keys 'x', 'y', and 'z' from props.

React

const memoizedObj = useMemo(() => ({ x: [1], y: [2], z: [3] }), [props.x, props.y, props.z]);

Drag options to blanks, or click blank then click option'

Aprops.x

Bprops.y

Cprops.z

DmemoizedObj

Attempts:

3 left

💡 Hint

Common Mistakes

Using the memoized object inside its own definition.

The object keys get their values from props.x, props.y, and props.z respectively.

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