Skip to main content

`useMemo` for Memoizing Expensive Calculations (Part 1): When and How to Use It #124

📖 Introduction​

Following our exploration of React.memo for Component Memoization (Part 2), where we learned how to prevent unnecessary re-renders of components, this article delves into another powerful optimization hook: useMemo. While React.memo is about memoizing entire component outputs, useMemo focuses on memoizing the result of expensive calculations within your components. This concept is essential for fine-tuning your application's performance by avoiding redundant computations and ensuring a smoother user experience.

📚 Prerequisites​

Before we begin, please ensure you have a solid grasp of the following concepts:

  • JavaScript fundamentals (functions, arrays, objects).
  • React Components, Props, and State.
  • Basic understanding of how React re-renders (refer to our previous discussions or Josh W. Comeau's "Why React Re-Renders").
  • The concept of "expensive calculations" (operations that take significant time or resources).
  • Familiarity with React.memo will be helpful for understanding related optimization techniques.

🎯 Article Outline: What You'll Master​

In this article, you will learn:

  • ✅ Foundational Theory: The core principles behind useMemo and why it's crucial for performance.
  • ✅ Core Implementation: How to use useMemo with clear, step-by-step examples, including its syntax and dependency array.
  • ✅ Identifying "Expensive": Understanding what constitutes an "expensive calculation" that warrants memoization.
  • ✅ When to Use useMemo (Part 1): Focusing on the primary use case of avoiding costly recalculations.
  • ✅ Common Pitfalls (Introduction): A first look at potential mistakes when using useMemo.

🧠 Section 1: The Core Concepts of useMemo​

Before writing any code, it's crucial to understand the foundational theory. useMemo is a React Hook that lets you cache the result of a calculation between re-renders. It's more than just syntax; it's a paradigm for optimizing computational work.

Imagine you have a function within your component that performs a complex calculation – perhaps it iterates over a large dataset, performs intricate data transformations, or engages in some other CPU-intensive task. By default, React will re-execute this function every time your component re-renders, even if the inputs to that calculation haven't changed. This can lead to performance bottlenecks, especially if the component re-renders frequently or the calculation is particularly demanding.

useMemo solves this problem by "remembering" (or memoizing) the result of your expensive function. It will only re-run the function if one of its specified dependencies has changed since the last render. If the dependencies are the same, useMemo returns the previously cached result, saving valuable processing time.

Analogy: The Smart Calculator

Think of useMemo as a smart calculator with a memory function.

  • Without useMemo: Every time you need the result of 255 * 789, you punch it into a basic calculator, and it computes it from scratch. If your component re-renders 10 times for unrelated reasons, you're doing that same multiplication 10 times.
  • With useMemo: You tell your smart calculator, "Calculate 255 * 789, and remember this result as long as the numbers 255 and 789 don't change." The first time, it computes and stores the result. For subsequent renders, if 255 and 789 are still the same, it instantly gives you the remembered result without re-calculating. If either number changes, then it performs the calculation again and stores the new result.

Key Principles:

  • Memoization: The core idea. useMemo stores the result of a function call and returns the cached result if the inputs (dependencies) haven't changed.
  • Dependency Array: This is crucial. It's an array of values that useMemo watches. If any value in this array changes between renders, the memoized function is re-executed. If the array is empty ([]), the function runs once on mount and the value is cached indefinitely (unless the component unmounts).
  • Purity: The function you pass to useMemo should be pure. This means for the same inputs, it should always return the same output and have no side effects (like modifying external variables or making API calls). React might run it more than once (e.g., in Strict Mode) to help detect impurities.

💻 Section 2: Deep Dive - Implementation and Walkthrough​

Now, let's translate theory into practice. We'll start with the fundamentals and progressively build up to more complex examples.

The syntax for useMemo is:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
  • First argument: A function (often an inline arrow function) that performs the expensive calculation and returns the value you want to memoize.
  • Second argument: An array of dependencies. These are the values from your component's scope (props, state, other variables) that the calculation function depends on.

2.1 - Your First Example: A Simple Expensive Calculation​

Let's imagine a component that needs to calculate the factorial of a number. Factorial calculations can become expensive for larger numbers.

// code-block-1.jsx
// A foundational example of useMemo for an expensive calculation.

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

// A (potentially) expensive function
function calculateFactorial(n) {
  if (n < 0) return 'Invalid input';
  if (n === 0) return 1;
  let result = 1;
  for (let i = n; i > 0; i--) {
    result *= i;
  }
  console.log(`Calculating factorial for ${n}`); // To observe when it runs
  return result;
}

function FactorialCalculator() {
  const [number, setNumber] = useState(5);
  const [inc, setInc] = useState(0); // An unrelated state to trigger re-renders

  // Memoize the factorial calculation
  const factorial = useMemo(() => {
    return calculateFactorial(number);
  }, [number]); // Dependency: only re-calculate if 'number' changes

  return (
    <div>
      <h1>Factorial of {number} is {factorial}</h1>
      <label>
        Number:
        <input
          type="number"
          value={number}
          onChange={(e) => setNumber(parseInt(e.target.value, 10))}
        />
      </label>
      <hr />
      <p>Unrelated Counter: {inc}</p>
      <button onClick={() => setInc(i => i + 1)}>Increment Unrelated Counter</button>
      <p>
        <em>
          Open your console. Notice "Calculating factorial..." only logs when you change the
          number input, not when you increment the unrelated counter.
        </em>
      </p>
    </div>
  );
}

export default FactorialCalculator;

Step-by-Step Code Breakdown:

  1. calculateFactorial(n): This is our potentially expensive function. We've added a console.log to observe when it's actually executed.
  2. FactorialCalculator Component:
    • It has a number state for the input to our factorial function.
    • It also has an inc state. This state is unrelated to the factorial calculation. Its purpose is to trigger re-renders of FactorialCalculator so we can see if calculateFactorial runs unnecessarily.
  3. const factorial = useMemo(() => { ... }, [number]);:
    • We call useMemo.
    • The first argument is an arrow function () => calculateFactorial(number). This function, when called, will execute our expensive factorial calculation.
    • The second argument is the dependency array [number]. This tells useMemo to only re-run the calculation function if the number state variable has changed since the last render.
  4. Interaction:
    • When you change the input field for "Number", the number state updates. Since number is a dependency for useMemo, calculateFactorial will be re-executed, and you'll see the log in the console.
    • When you click "Increment Unrelated Counter", the inc state updates, causing FactorialCalculator to re-render. However, because number (the dependency for useMemo) has not changed, useMemo returns the cached factorial value, and calculateFactorial is not re-executed. You won't see a new log in the console.

This example clearly demonstrates how useMemo helps avoid redundant expensive calculations.

2.2 - Connecting the Dots: Deriving Data from Props​

Consider a component that receives a large list of items as a prop and needs to display only the filtered items based on some criteria (also a prop).

// code-block-2.jsx
// Using useMemo to optimize filtering a list received via props.

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

const initialItems = Array.from({ length: 1000 }, (_, i) => ({
  id: i,
  name: `Item ${i}`,
  isEven: i % 2 === 0,
}));

function FilteredList({ items, filterType }) {
  // Memoize the filtered list
  const filteredItems = useMemo(() => {
    console.log(`Filtering items for type: ${filterType}`);
    if (filterType === 'all') {
      return items;
    }
    return items.filter(item => filterType === 'even' ? item.isEven : !item.isEven);
  }, [items, filterType]); // Dependencies: items array and filterType

  return (
    <ul>
      {filteredItems.map(item => (
        <li key={item.id}>{item.name} - {item.isEven ? 'Even' : 'Odd'}</li>
      ))}
    </ul>
  );
}

function App() {
  const [currentFilter, setCurrentFilter] = useState('all');
  const [theme, setTheme] = useState('light'); // Unrelated state

  return (
    <div style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff' }}>
      <h2>Filtered List Example</h2>
      <button onClick={() => setTheme(t => t === 'light' ? 'dark' : 'light')}>
        Toggle Theme (Re-renders App)
      </button>
      <div>
        <button onClick={() => setCurrentFilter('all')}>All</button>
        <button onClick={() => setCurrentFilter('even')}>Even</button>
        <button onClick={() => setCurrentFilter('odd')}>Odd</button>
      </div>
      <p>Current filter: {currentFilter}</p>
      <FilteredList items={initialItems} filterType={currentFilter} />
      <p><em>Open console. "Filtering items..." logs only when filter buttons are clicked, not when theme is toggled.</em></p>
    </div>
  );
}

export default App;

Walkthrough:

  • FilteredList Component: Receives items (a large array) and filterType as props.
  • filteredItems = useMemo(...): The filtering logic, which could be slow for very large arrays, is wrapped in useMemo.
  • Dependencies [items, filterType]: The filtering re-runs only if the items array itself changes or if the filterType changes.
  • App Component:
    • Manages currentFilter state, which is passed to FilteredList.
    • Manages an unrelated theme state. When theme changes, App re-renders.
  • Optimization: When you "Toggle Theme", App re-renders, and consequently, FilteredList would normally re-render too. Without useMemo, the filtering logic inside FilteredList would run again, even though items and filterType haven't changed. With useMemo, this expensive filtering is skipped, and the cached filteredItems are used. The console.log for "Filtering items..." will only appear when you change the actual filter, proving the optimization.

🛠️ Section 3: Project-Based Example: Optimizing a Data Display Component​

It's time to apply our knowledge to a practical, real-world scenario. We will build a component that displays a list of products, allowing users to sort them by price or name. The sorting operation can be considered our "expensive calculation," especially if the product list is large.

The Goal: Create a ProductList component that takes an array of products. It should allow sorting these products without re-calculating the sorted list unnecessarily when the parent component re-renders for other reasons.

The Plan:

  1. Create a basic ProductList component that sorts data on every render.
  2. Add an unrelated state to its parent to trigger re-renders.
  3. Observe unnecessary re-calculations (e.g., via console.log).
  4. Refactor ProductList to use useMemo for the sorting logic.
  5. Verify that sorting only happens when relevant dependencies (products or sort key) change.
// project-example.jsx
// ProductList optimized with useMemo for sorting.

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

const sampleProducts = [
  { id: 1, name: 'Laptop Pro', price: 1200 },
  { id: 2, name: 'Desktop Basic', price: 800 },
  { id: 3, name: 'Tablet Lite', price: 300 },
  { id: 4, name: 'Smartphone X', price: 950 },
  { id: 5, name: 'Wireless Mouse', price: 25 },
];

function ProductList({ products, sortKey, sortOrder }) {
  const sortedProducts = useMemo(() => {
    console.log(`Sorting products by ${sortKey} (${sortOrder})...`);
    const newProducts = [...products]; // Create a new array to avoid mutating the original prop
    newProducts.sort((a, b) => {
      if (a[sortKey] < b[sortKey]) {
        return sortOrder === 'asc' ? -1 : 1;
      }
      if (a[sortKey] > b[sortKey]) {
        return sortOrder === 'asc' ? 1 : -1;
      }
      return 0;
    });
    return newProducts;
  }, [products, sortKey, sortOrder]);

  return (
    <ul>
      {sortedProducts.map(product => (
        <li key={product.id}>
          {product.name} - ${product.price}
        </li>
      ))}
    </ul>
  );
}

function App() {
  const [currentSortKey, setCurrentSortKey] = useState('name');
  const [currentSortOrder, setCurrentSortOrder] = useState('asc');
  const [searchTerm, setSearchTerm] = useState(''); // Unrelated state for demonstration

  return (
    <div>
      <h2>Product Catalog</h2>
      <div>
        <label>
          Search (unrelated to sorting):
          <input type="text" value={searchTerm} onChange={e => setSearchTerm(e.target.value)} />
        </label>
      </div>
      <div>
        Sort by:
        <select value={currentSortKey} onChange={e => setCurrentSortKey(e.target.value)}>
          <option value="name">Name</option>
          <option value="price">Price</option>
        </select>
        <select value={currentSortOrder} onChange={e => setCurrentSortOrder(e.target.value)}>
          <option value="asc">Ascending</option>
          <option value="desc">Descending</option>
        </select>
      </div>

      <ProductList products={sampleProducts} sortKey={currentSortKey} sortOrder={currentSortOrder} />
      <p>
        <em>
          Open console. "Sorting products..." logs only when sort key/order changes,
          not when typing in the search input.
        </em>
      </p>
    </div>
  );
}

export default App;

Walkthrough of Building the Feature:

  1. ProductList Component:
    • It receives products, sortKey (e.g., 'name' or 'price'), and sortOrder ('asc' or 'desc') as props.
    • sortedProducts = useMemo(...): The sorting logic is encapsulated here.
      • We create a copy of products using [...products] because Array.prototype.sort() mutates the array in place, and we should not mutate props.
      • The sort method then arranges the products based on sortKey and sortOrder.
      • The dependencies are [products, sortKey, sortOrder]. The list is re-sorted only if the original product list changes, or if the sorting criteria change.
  2. App Component:
    • Manages state for currentSortKey and currentSortOrder.
    • Includes an unrelated searchTerm state. When the user types in the search input, App re-renders.
  3. Optimization in Action:
    • If you change the "Sort by" or "Sort order" dropdowns, the sortKey or sortOrder props change, triggering a re-sort in ProductList, and you'll see the console log.
    • If you type in the "Search" input, the App component re-renders due to searchTerm changing. However, since products, sortKey, and sortOrder (the props passed to ProductList and used as dependencies in useMemo) remain unchanged, ProductList uses the memoized sortedProducts. The expensive sort operation is skipped, and you won't see the "Sorting products..." log.

This project demonstrates how useMemo is invaluable for optimizing components that derive complex data from props, ensuring that computations only occur when absolutely necessary.

🔬 Section 4: A Deeper Dive: When and How to Use useMemo Effectively (Part 1)​

Now that you've seen useMemo in action for expensive calculations, let's refine our understanding of when and how to apply it effectively. This section focuses on the "expensive calculation" aspect, as "Part 1" of our useMemo exploration.

4.1 - Under the Hood: How It Really Works (Briefly)​

When you use useMemo(computeFunction, dependencies), React does the following:

  1. Initial Render: Calls computeFunction, stores its returned value, and also stores the dependencies array.
  2. Subsequent Renders:
    • It compares the current dependencies array with the dependencies array from the previous render.
    • The comparison is done item by item using Object.is() (similar to === but handles NaN and +0/-0 cases better).
    • If all dependencies are the same as in the previous render, React returns the stored value without calling computeFunction.
    • If any dependency has changed, React calls computeFunction again, stores the new returned value, and updates its stored dependencies array.

The key is that useMemo isn't magic; it's a controlled caching mechanism based on its dependency list.

4.2 - Common Caveats and Pitfalls (Initial Look)​

While powerful, useMemo can be misused. Here are some initial caveats related to expensive calculations:

  • Overhead of useMemo Itself: useMemo isn't free. React has to store the memoized value and compare the dependency array on every render. For very simple or fast calculations, the overhead of using useMemo might be greater than the cost of just re-running the calculation. Don't memoize everything!
  • Incorrect Dependency Array: This is a very common source of bugs.
    • Missing Dependencies: If your computeFunction uses a variable from the component scope but you forget to include it in the dependency array, useMemo might return a stale, incorrect cached value when that variable changes. Your linter (with the React plugin) usually helps catch this.
    • Too Many Dependencies / Unstable Dependencies: If a dependency changes on every render (e.g., an object or array defined fresh in the render body without its own memoization), useMemo will re-calculate every time, defeating its purpose. We'll touch more on this in Part 2 when discussing referential equality.
  • useMemo is an Optimization, Not a Guarantee: The React docs state: "You may rely on useMemo as a performance optimization, not as a semantic guarantee." This means React reserves the right to "forget" a memoized value in some scenarios (e.g., during development when hot reloading, or for future features like virtualized lists clearing cache for off-screen items). Your code should still work correctly if useMemo were removed, just perhaps slower.

4.3 - Thinking in useMemo: Identifying "Expensive"​

When should you consider a calculation "expensive" enough for useMemo?

  • Large Data Iterations: Looping through arrays or objects with thousands (or even hundreds, depending on the operation per item) of entries.
  • Complex Algorithms: Recursive functions, complex mathematical computations, significant data transformations.
  • Profiling: The React DevTools Profiler is your best friend. If you identify a component that is slow to render, you can use the profiler to see where time is being spent. If a specific function call within the render path shows up as taking significant time (e.g., more than a few milliseconds consistently), it's a candidate for useMemo. 
    console.time('myExpensiveFunction');
    const result = myExpensiveFunction(data);
    console.timeEnd('myExpensiveFunction');
    If myExpensiveFunction: 5ms (or more, especially if it runs often) appears in your console, consider useMemo.
  • Subjective Sluggishness: If an interaction in your UI feels laggy or unresponsive, and you trace it back to a component that re-renders frequently and performs some non-trivial computation, that computation might be a candidate.

It's often a judgment call, but profiling provides objective data. Start by writing clear, correct code. Optimize with useMemo when you have evidence of a performance bottleneck.

4.4 - Comparative Examples: useMemo vs. No useMemo​

Let's revisit our FactorialCalculator.

Without useMemo:

function FactorialCalculator_NoMemo() {
  const [number, setNumber] = useState(5);
  const [inc, setInc] = useState(0);

  const factorial = calculateFactorial(number); // Called on EVERY render

  return (
    <div>
      {/* ... UI ... */}
      <button onClick={() => setInc(i => i + 1)}>Increment Unrelated</button>
    </div>
  );
}

Here, calculateFactorial(number) runs every time FactorialCalculator_NoMemo re-renders, including when inc changes.

With useMemo:

function FactorialCalculator_WithMemo() {
  const [number, setNumber] = useState(5);
  const [inc, setInc] = useState(0);

  const factorial = useMemo(() => {
    return calculateFactorial(number);
  }, [number]); // Called ONLY when 'number' changes

  return (
    <div>
      {/* ... UI ... */}
      <button onClick={() => setInc(i => i + 1)}>Increment Unrelated</button>
    </div>
  );
}

Here, calculateFactorial(number) (inside useMemo) only runs when number changes. Re-renders due to inc changing do not re-trigger the factorial calculation. This is the core benefit for computationally expensive tasks.

🚀 Section 5: Advanced Techniques and Performance (Context for Part 1)​

For this "Part 1" of our useMemo exploration, the primary "advanced" consideration is mastering the identification of truly expensive calculations and correctly using the dependency array.

  • Profiling is Key: Don't guess. Use the React DevTools Profiler or console.time/timeEnd to measure the impact of your calculations. A calculation that seems complex might actually be very fast, making useMemo unnecessary overhead.
  • Dependency Granularity: Be precise with your dependencies. If your calculation only uses user.id, depend on user.id, not the entire user object, if other parts of user might change frequently without affecting the calculation.
  • useMemo for Computational Cost: Remember, the focus of this article (Part 1) is on skipping computationally expensive work. useMemo also has a critical role in preserving referential equality for objects and arrays passed to memoized child components (using React.memo) or as dependencies to other hooks (like useEffect, useCallback). We will explore this vital aspect in depth in "Part 2". For now, recognize that if a calculation is cheap but you need a stable reference to its result (e.g., an array or object), useMemo is also the tool, but the reason for using it shifts.

✨ Section 6: Best Practices and Anti-Patterns (Focus on Expensive Calculations)​

Writing code that works is one thing; writing code that is clean, maintainable, and scalable is another.

Best Practices (for expensive calculations):

  • Profile First, Memoize Later: Only apply useMemo to calculations that you've identified as genuinely performance-intensive through profiling. 
    // Good: Identified slowFunction as a bottleneck
    const result = useMemo(() => slowFunction(data), [data]);
  • Ensure Correct Dependencies: Always include all reactive values from the component scope that are used by the calculation function in the dependency array. Rely on the ESLint plugin eslint-plugin-react-hooks to help enforce this. 
    // Good: 'inputA' and 'inputB' are used, so they are in dependencies
    const complexResult = useMemo(() => compute(inputA, inputB), [inputA, inputB]);
  • Keep Calculation Functions Pure: The function passed to useMemo should not cause side effects. Given the same dependencies, it should always produce the same result.

Anti-Patterns (What to Avoid):

  • Premature Optimization / Over-Memoization: Wrapping every simple calculation or variable assignment in useMemo. This adds unnecessary overhead and makes code harder to read. 
    // Bad: 'a + b' is likely not expensive enough to warrant useMemo
    const sum = useMemo(() => a + b, [a, b]);
    // Better (if not expensive):
    // const sum = a + b;
  • Incorrect or Missing Dependency Array: 
    // Bad: 'b' is used but missing from dependencies. Risk of stale 'cachedResult'.
    const cachedResult = useMemo(() => expensiveOp(a, b), [a]);
  • Using useMemo for Side Effects: useMemo is for calculations. For side effects (like data fetching, subscriptions), use useEffect. 
    // Bad: Trying to fetch data inside useMemo
    // const data = useMemo(() => fetchData(id), [id]); // WRONG hook for side effects

💡 Conclusion & Key Takeaways​

Congratulations! You've taken a significant step in understanding how to optimize React applications using useMemo for expensive calculations. We've seen that useMemo is a powerful hook for caching the results of functions, preventing them from being re-executed on every render if their inputs haven't changed.

Let's summarize the key takeaways for this Part 1:

  • Purpose of useMemo: To memoize (cache) the result of a calculation, re-running it only when its dependencies change.
  • Primary Use Case (Part 1): Skipping computationally expensive operations that would otherwise run on every render.
  • Dependency Array is Critical: It controls when the memoized function re-runs. Incorrect dependencies lead to bugs or negate the optimization.
  • Profile, Don't Guess: Use useMemo strategically for functions that are proven to be slow, rather than applying it indiscriminately.

Challenge Yourself: Review a React component you've built previously. Can you identify any calculations within it that might be computationally expensive if the component re-renders frequently? Consider how you might apply useMemo and what its dependency array would be. If you don't have one, try creating a small component that generates a large list of derived data and see if useMemo can prevent re-computation when unrelated state changes.

➡️ Next Steps​

You now have a foundational understanding of using useMemo to optimize costly computations. In the next article, "useMemo for Memoizing Expensive Calculations (Part 2): A practical example of using useMemo" (Link will be updated once Part 2 exists), we will dive deeper into more practical examples, explore common patterns, and importantly, discuss the other major use case for useMemo: preserving referential equality for objects and arrays, which is crucial for optimizing child components with React.memo and for dependencies in other hooks like useEffect and useCallback.

Your commitment to mastering these React concepts is commendable. Keep experimenting, keep building, and your React skills will continue to flourish!

glossary​

  • Memoization: An optimization technique where the results of expensive function calls are cached and returned for the same inputs, avoiding redundant computation.
  • Expensive Calculation: A function or operation that consumes significant CPU time or resources, potentially leading to noticeable delays in the UI if run too frequently.
  • Dependency Array: The second argument to hooks like useMemo, useCallback, and useEffect. It's an array of values that, if changed between renders, will trigger the hook to re-execute its logic or re-calculate its value.
  • Pure Function: A function that, given the same input, will always return the same output and does not have any observable side effects.

Further Reading​