useMemo hook in React - Mini Project: Build & Apply

Using the useMemo Hook in React

📖 Scenario: You are building a simple React app that calculates the sum of numbers in a list. The list can be changed by the user. To avoid recalculating the sum every time the component re-renders, you will use the useMemo hook.

🎯 Goal: Build a React functional component that uses useMemo to efficiently calculate and display the sum of a list of numbers.

📋 What You'll Learn

Create a list of numbers as initial data

Add a state variable to hold the list

Use the useMemo hook to calculate the sum of the numbers

Display the sum in the component

💡 Why This Matters

🌍 Real World

Using useMemo helps improve performance in React apps by avoiding unnecessary recalculations, especially when working with large data or expensive computations.

💼 Career

Understanding useMemo is important for React developers to write efficient and responsive user interfaces.

1

Create the initial list of numbers

Create a constant array called numbers with these exact values: [10, 20, 30, 40, 50].

React

# Create the numbers array
# Your code here

Hint

Use const numbers = [10, 20, 30, 40, 50]; to create the array.

2

Add state to hold the numbers list

Import useState from React and create a state variable called list with the initial value set to numbers. Also create the setter function called setList.

React

const numbers = [10, 20, 30, 40, 50];
// Import useState and create state variable list and setList
// Your code here

Hint

Use const [list, setList] = useState(numbers); inside your component.

3

Use useMemo to calculate the sum

Import useMemo from React and create a constant called sum that uses useMemo to calculate the sum of all numbers in list. The calculation should only run when list changes.

React

import React, { useState } from 'react';

const numbers = [10, 20, 30, 40, 50];

function SumComponent() {
  const [list, setList] = useState(numbers);
  // Import useMemo and create sum using useMemo
  // Your code here

Hint

Use const sum = useMemo(() => list.reduce((acc, num) => acc + num, 0), [list]);

4

Display the sum in the component

Return a JSX element that shows a <div> with the text Total Sum: followed by the sum value. Close the function with a closing brace.

React

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

const numbers = [10, 20, 30, 40, 50];

function SumComponent() {
  const [list, setList] = useState(numbers);

  const sum = useMemo(() => {
    return list.reduce((acc, num) => acc + num, 0);
  }, [list]);

  // Return JSX to display the sum
  // Your code here

Hint

Use return <div>Total Sum: {sum}</div>; to show the sum.

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