useMemo hook in React

Introduction

The useMemo hook helps your React app remember a value so it doesn't have to recalculate it every time. This makes your app faster and smoother.

When you have a slow calculation that doesn't need to run on every render.

When you want to avoid repeating work unless some data changes.

When you want to keep the same object or array reference to prevent unnecessary updates.

When you want to optimize performance in a list or complex UI.

When you want to avoid expensive operations inside your component.

Syntax

React

const memoizedValue = useMemo(() => {
  // calculation or function
  return result;
}, [dependencies]);

The first argument is a function that returns the value you want to remember.

The second argument is an array of dependencies. The value recalculates only if these change.

Examples

Calculate double of number only when number changes.

React

const doubled = useMemo(() => number * 2, [number]);

Sort list only when list changes.

React

const sortedList = useMemo(() => [...list].sort(), [list]);

Create a config object once and reuse it forever because dependencies array is empty.

React

const config = useMemo(() => ({ theme: 'dark' }), []);

Sample Program

This example shows a component that calculates double of a number. The calculation logs a message only when the number changes. Clicking 'Toggle Other' does not recalculate because useMemo remembers the value.

React

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

function ExpensiveCalculation({ number }) {
  const doubled = useMemo(() => {
    console.log('Calculating double...');
    return number * 2;
  }, [number]);

  return <div>Double: {doubled}</div>;
}

export default function App() {
  const [count, setCount] = useState(0);
  const [other, setOther] = useState(false);

  return (
    <main>
      <h1>useMemo Example</h1>
      <button onClick={() => setCount(c => c + 1)}>Increase Count</button>
      <button onClick={() => setOther(o => !o)}>Toggle Other</button>
      <p>Count: {count}</p>
      <p>Other: {other.toString()}</p>
      <ExpensiveCalculation number={count} />
    </main>
  );
}

Important Notes

Don't use useMemo to fix bugs or for every value. Use it only when performance matters.

Remember to include all variables used inside the function in the dependencies array.

Logging inside useMemo helps see when it recalculates.

Summary

useMemo remembers a value between renders to avoid repeating work.

It recalculates only when dependencies change.

Use it to speed up slow calculations or keep stable references.

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