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.