useMemo hook in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this React component using useMemo?

Consider this React component that uses useMemo to optimize a calculation. What will be displayed when the button is clicked twice?

React

import React, { useState, useMemo } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  const double = useMemo(() => {
    console.log('Calculating double');
    return count * 2;
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <p>Double: {double}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

A The console logs 'Calculating double' only once, but the double value does not update after the first click.

B The console logs 'Calculating double' only once, and the displayed double updates correctly each click.

C The console logs 'Calculating double' every time the button is clicked, and the double updates correctly.

D The console never logs 'Calculating double', and the double value stays at 0.

💡 Hint

Think about when useMemo recalculates the value based on dependencies.

useMemo recalculates the value only when count changes. The console log appears once per change, so clicking the button twice triggers two recalculations, but each render only logs once. This optimizes performance by avoiding unnecessary recalculations.

❓ state_output

intermediate

What is the value of result after this code runs?

Given this React snippet using useMemo, what will result be after the component renders?

React

import React, { useState, useMemo } from 'react';

function Example() {
  const [num, setNum] = useState(5);
  const result = useMemo(() => num * 3, []);
  return <div>{result}</div>;
}

export default Example;

A 15

B 0

C NaN

D 5

💡 Hint

Look at the dependency array and initial state value.

The useMemo runs once on mount because the dependency array is empty. It uses the initial num value 5, so result is 15.

📝 Syntax

advanced

Which option correctly uses useMemo to memoize a function result?

Choose the correct syntax to memoize the result of computeValue() based on input.

A const memoized = useMemo(computeValue(input), [input]);

B const memoized = useMemo(computeValue, input);

C const memoized = useMemo(() => computeValue, [input]);

D const memoized = useMemo(() => computeValue(input), [input]);

💡 Hint

Remember that useMemo expects a function as the first argument.

Option D correctly passes a function that calls computeValue(input). Option D calls the function immediately, Option D returns the function itself, and Option D has wrong arguments.

🔧 Debug

advanced

Why does this useMemo hook not update when count changes?

Look at this code snippet. Why does memoizedValue not update when count changes?

React

const memoizedValue = useMemo(() => count * 2, []);

A Because the dependency array is empty, so useMemo never recalculates.

B Because useMemo cannot depend on state variables.

C Because the function inside useMemo is missing a return statement.

D Because count is not defined in the component.

💡 Hint

Check the dependency array carefully.

An empty dependency array means the memoized value is calculated only once on mount. To update when count changes, it must be included in the dependency array.

🧠 Conceptual

expert

What is the main benefit of using useMemo in React components?

Choose the best explanation for why developers use useMemo in React.

A To replace useEffect for side effects that depend on state changes.

B To prevent expensive calculations from running on every render by caching the result until dependencies change.

C To automatically update state variables without calling setState.

D To memoize event handler functions to avoid re-creating them on every render.

💡 Hint

Think about performance optimization and when calculations run.

useMemo caches the result of a calculation and only recalculates when dependencies change, improving performance by avoiding unnecessary work.

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