useMemo

useMemo: Memoizing Expensive Calculations & Derived State

The useMemo hook caches (memoizes) the calculated result of an expensive computation between component renders, recalculating only when declared dependencies change.

Memoized Computation Workflow

flowchart TD
    Render["Component Renders"] --> Check{"Dependencies Changed?"}
    Check -- No --> Cached["Return Previously Computed Result (0ms)"]
    Check -- Yes --> Recompute["Execute Calculation Function & Cache Result"]

Practical Code Example: Filtering Large Datasets

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

// Synthetic dataset generator
const generateProducts = () => {
  return Array.from({ length: 5000 }, (_, i) => ({
    id: i + 1,
    name: `Product ${i + 1}`,
    price: Math.floor(Math.random() * 1000) + 1,
  }));
};

const allProducts = generateProducts();

export default function FilteredProductList() {
  const [maxPrice, setMaxPrice] = useState(500);
  const [theme, setTheme] = useState('light');

  // Expensive filtering computation memoized with useMemo
  const filteredProducts = useMemo(() => {
    console.log('Computing filtered products list...');
    return allProducts.filter((product) => product.price <= maxPrice);
  }, [maxPrice]); // Re-computes ONLY when maxPrice changes

  return (
    <div className={`container theme-${theme}`}>
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        Toggle Theme (Current: {theme})
      </button>

      <div>
        <label>Filter Max Price: ${maxPrice}</label>
        <input 
          type="range" 
          min="10" 
          max="1000" 
          value={maxPrice} 
          onChange={(e) => setMaxPrice(Number(e.target.value))} 
        />
      </div>

      <h3>Matching Products: {filteredProducts.length}</h3>
    </div>
  );
}

When to Use useMemo

1. Filtering, Sorting, or Transforming Large Arrays: Operations running over thousands of items during render.
2. Referential Equality Preservation: Caching object or array dependencies passed to useEffect or memoized child components.

Best Practices & Gotchas

• Do Not Over-Optimize Micro-Calculations: Wrapping simple arithmetic (useMemo(() => a + b, [a, b])) adds memory overhead without measurable speedup. Only memoize computationally expensive operations.
• Keep Functions Pure: The function passed to useMemo should run during rendering and contain no side effects (API calls, DOM updates).

Self-Check Challenge

Write a useMemo calculation that sorts a list of users alphabetically by name only when the users prop changes.