React · Hooks (Comprehensive)

useMemo Hook

Master useMemo to memoize expensive calculations and optimize React component performance by caching computed values.

Find videos you like?

Save to resource drawer for future reference!

What is useMemo?

Memoizing expensive calculations

useMemo returns a memoized value. It caches the result of an expensive calculation between re-renders until its dependencies change, preventing unnecessary recalculations.

Syntax

const memoizedValue = useMemo(() => {}

return expensiveCalculation(a, b);

}), [dependencies]);

Without useMemo

const result = expensiveCalculation(data);

// Runs every render!

Expensive calculation runs on every re-render!

With useMemo

const result = useMemo(() => {}

return expensiveCalculation(data);

}), [data]); // Cached!

Calculation only runs when data changes!

When to Use?

Use useMemo for expensive calculations, data transformations, filtering large arrays, or any computation that's costly and doesn't need to run on every render!

useMemo vs useCallback

Understanding the key differences

While both hooks optimize performance, they serve different purposes. useMemo memoizes values, while useCallback memoizes functions.

useMemo

Caches calculated values

Returns the result of a function

Used for expensive computations

useMemo(() => {}

return data.filter(...);

}), [data]);

useCallback

Caches function instances

Returns the function itself

Used for callback functions

useCallback(() => {}

setData(data.filter(...));

}), [data]);

Key Insight

useCallback(fn, deps) is equivalent to useMemo(() => fn, deps) - useCallback is just a special case of useMemo for functions!

Step-by-Step Guide

Learn useMemo progressively

Step 1: Import useMemo

First, import useMemo from React at the top of your component file.

import React, { useMemo } from 'react';

Pro Tip

You can import multiple hooks: { useState, useEffect, useMemo }.

Step 2: Wrap Expensive Calculation

Wrap your expensive calculation with useMemo to cache the result.

const expensiveValue = useMemo(() => {}

console.log('Running expensive calculation...');

return data.reduce((sum, item) => sum + item.value, 0);

}), [data]); // Dependency array

Key Point

The calculation only runs when dependencies in the array change!

Step 3: Use Dependencies Wisely

Include only the variables that your calculation depends on.

const [users, setUsers] = useState([]);

const [searchTerm, setSearchTerm] = useState('');

const filteredUsers = useMemo(() => {}

return users.filter(user =>

user.name.toLowerCase().includes(searchTerm.toLowerCase())

}), [users, searchTerm]); // Both dependencies

Important

Missing dependencies can cause stale data. Too many dependencies reduce optimization benefits!

Step 4: Use in JSX

Use the memoized value in your component's JSX.

function UserList() {}

const filteredUsers = useMemo(() => {}

return users.filter(...);

}), [users]);

return (

<div>

{}filteredUsers.map(user => (

}))

</div>

);

};

Key Point

The filtered list is only recalculated when the users array changes!

Example: Optimized Data Processing

Expensive calculations with useMemo optimization

Data Processing with useMemo

Filter and calculate statistics efficiently

Frontend

function DataProcessor() {
  const [products, setProducts] = React.useState([
    { id: 1, name: 'Laptop', price: 999, category: 'Electronics' },
    { id: 2, name: 'Book', price: 29, category: 'Education' },
    { id: 3, name: 'Phone', price: 699, category: 'Electronics' },
    { id: 4, name: 'Course', price: 199, category: 'Education' },
    { id: 5, name: 'Tablet', price: 399, category: 'Electronics' }
  ]);
  
  const [selectedCategory, setSelectedCategory] = React.useState('All');
  const [minPrice, setMinPrice] = React.useState(0);
  const [rerender, setRerender] = React.useState(0);

  // Memoized filtered products - only recalculates when filters change
  const filteredProducts = React.useMemo(() => {
    console.log('🔄 Filtering products...');
    return products.filter(product => {
      const categoryMatch = selectedCategory === 'All' || product.category === selectedCategory;
      const priceMatch = product.price >= minPrice;
      return categoryMatch && priceMatch;
    });
  }, [products, selectedCategory, minPrice]);

  // Memoized statistics - only recalculates when filtered products change
  const statistics = React.useMemo(() => {
    console.log('📊 Calculating statistics...');
    const total = filteredProducts.reduce((sum, product) => sum + product.price, 0);
    const average = filteredProducts.length > 0 ? total / filteredProducts.length : 0;
    
    // Fix Math.max/Math.min with empty arrays
    const prices = filteredProducts.map(p => p.price);
    const maxPrice = prices.length > 0 ? Math.max(...prices) : 0;
    const minPriceActual = prices.length > 0 ? Math.min(...prices) : 0;
    
    return {
      total,
      average: average.toFixed(2),
      maxPrice,
      minPrice: minPriceActual,
      count: filteredProducts.length
    };
  }, [filteredProducts]);

  // Memoized categories list - only recalculates when products change
  const categories = React.useMemo(() => {
    console.log('📋 Extracting categories...');
    const cats = ['All', ...new Set(products.map(p => p.category))];
    return cats;
  }, [products]);

  return (
    <div className="container">
      <h1>📊 useMemo Data Processing</h1>
      
      <div className="controls">
        <div className="filter-group">
          <label>Category:</label>
          <select 
            value={selectedCategory} 
            onChange={(e) => setSelectedCategory(e.target.value)}
          >
            {categories.map(cat => (
              <option key={cat} value={cat}>{cat}</option>
            ))}
          </select>
        </div>
        
        <div className="filter-group">
          <label>Min Price: {'$'}{minPrice}</label>
          <input 
            type="range" 
            min="0" 
            max="1000" 
            value={minPrice}
            onChange={(e) => setMinPrice(Number(e.target.value))}
          />
        </div>
        
        <button onClick={() => setRerender(r => r + 1)} className="btn-secondary">
          Force Re-render ({rerender})
        </button>
      </div>

      <div className="stats-grid">
        <div className="stat-card">
          <h3>Total Products</h3>
          <div className="stat-value">{statistics.count}</div>
        </div>
        <div className="stat-card">
          <h3>Total Value</h3>
          <div className="stat-value">{'$'}{statistics.total}</div>
        </div>
        <div className="stat-card">
          <h3>Average Price</h3>
          <div className="stat-value">{'$'}{statistics.average}</div>
        </div>
        <div className="stat-card">
          <h3>Price Range</h3>
          <div className="stat-value">{'$'}{statistics.minPrice} - {'$'}{statistics.maxPrice}</div>
        </div>
      </div>

      <div className="products">
        <h3>Filtered Products ({filteredProducts.length})</h3>
        {filteredProducts.map(product => (
          <div key={product.id} className="product-card">
            <div className="product-info">
              <h4>{product.name}</h4>
              <p>{product.category}</p>
            </div>
            <div className="product-price">
              {'$'}{product.price}
            </div>
          </div>
        ))}
      </div>

      <div className="info">
        💡 Check the console to see when calculations run. They only run when dependencies change!
      </div>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<DataProcessor />);

Live Preview

Loading preview...

Key Takeaways

Essential useMemo concepts to remember

Memoizes Values

Returns same computed value between renders until dependencies change.

Performance Boost

Prevents expensive calculations from running on every render.

Dependency Array

Calculation only runs when dependencies in the array change.

Use Judiciously

Don't overuse! Only for truly expensive calculations.

Performance Tool!

useMemo is a performance optimization. Use it for expensive computations, data filtering, sorting, or any calculation that's costly and doesn't need to run on every render!

Previous Topic

useCallback Hook

Optimize performance with useCallback, prevent unnecessary re-renders, and memoization patterns.

Next Topic

useLayoutEffect Hook

Synchronous DOM measurements, when to use useLayoutEffect vs useEffect, and layout calculations.

Ask a Question

Have a question about useMemo Hook? Ask our AI assistant.

🔐 Login to use AI Assistant

React · Hooks (Comprehensive)

useMemo Hook

Master useMemo to memoize expensive calculations and optimize React component performance by caching computed values.

Find videos you like?

Save to resource drawer for future reference!

What is useMemo?

Memoizing expensive calculations

useMemo returns a memoized value. It caches the result of an expensive calculation between re-renders until its dependencies change, preventing unnecessary recalculations.

Syntax

const memoizedValue = useMemo(() => {}

return expensiveCalculation(a, b);

}), [dependencies]);

Without useMemo

const result = expensiveCalculation(data);

// Runs every render!

Expensive calculation runs on every re-render!

With useMemo

const result = useMemo(() => {}

return expensiveCalculation(data);

}), [data]); // Cached!

Calculation only runs when data changes!

When to Use?

Use useMemo for expensive calculations, data transformations, filtering large arrays, or any computation that's costly and doesn't need to run on every render!

useMemo vs useCallback

Understanding the key differences

While both hooks optimize performance, they serve different purposes. useMemo memoizes values, while useCallback memoizes functions.

useMemo

Caches calculated values

Returns the result of a function

Used for expensive computations

useMemo(() => {}

return data.filter(...);

}), [data]);

useCallback

Caches function instances

Returns the function itself

Used for callback functions

useCallback(() => {}

setData(data.filter(...));

}), [data]);

Key Insight

useCallback(fn, deps) is equivalent to useMemo(() => fn, deps) - useCallback is just a special case of useMemo for functions!

Step-by-Step Guide

Learn useMemo progressively

Step 1: Import useMemo

First, import useMemo from React at the top of your component file.

import React, { useMemo } from 'react';

Pro Tip

You can import multiple hooks: { useState, useEffect, useMemo }.

Step 2: Wrap Expensive Calculation

Wrap your expensive calculation with useMemo to cache the result.

const expensiveValue = useMemo(() => {}

console.log('Running expensive calculation...');

return data.reduce((sum, item) => sum + item.value, 0);

}), [data]); // Dependency array

Key Point

The calculation only runs when dependencies in the array change!

Step 3: Use Dependencies Wisely

Include only the variables that your calculation depends on.

const [users, setUsers] = useState([]);

const [searchTerm, setSearchTerm] = useState('');

const filteredUsers = useMemo(() => {}

return users.filter(user =>

user.name.toLowerCase().includes(searchTerm.toLowerCase())

}), [users, searchTerm]); // Both dependencies

Important

Missing dependencies can cause stale data. Too many dependencies reduce optimization benefits!

Step 4: Use in JSX

Use the memoized value in your component's JSX.

function UserList() {}

const filteredUsers = useMemo(() => {}

return users.filter(...);

}), [users]);

return (

<div>

{}filteredUsers.map(user => (

}))

</div>

);

};

Key Point

The filtered list is only recalculated when the users array changes!

Example: Optimized Data Processing

Expensive calculations with useMemo optimization

Data Processing with useMemo

Filter and calculate statistics efficiently

Frontend

function DataProcessor() {
  const [products, setProducts] = React.useState([
    { id: 1, name: 'Laptop', price: 999, category: 'Electronics' },
    { id: 2, name: 'Book', price: 29, category: 'Education' },
    { id: 3, name: 'Phone', price: 699, category: 'Electronics' },
    { id: 4, name: 'Course', price: 199, category: 'Education' },
    { id: 5, name: 'Tablet', price: 399, category: 'Electronics' }
  ]);
  
  const [selectedCategory, setSelectedCategory] = React.useState('All');
  const [minPrice, setMinPrice] = React.useState(0);
  const [rerender, setRerender] = React.useState(0);

  // Memoized filtered products - only recalculates when filters change
  const filteredProducts = React.useMemo(() => {
    console.log('🔄 Filtering products...');
    return products.filter(product => {
      const categoryMatch = selectedCategory === 'All' || product.category === selectedCategory;
      const priceMatch = product.price >= minPrice;
      return categoryMatch && priceMatch;
    });
  }, [products, selectedCategory, minPrice]);

  // Memoized statistics - only recalculates when filtered products change
  const statistics = React.useMemo(() => {
    console.log('📊 Calculating statistics...');
    const total = filteredProducts.reduce((sum, product) => sum + product.price, 0);
    const average = filteredProducts.length > 0 ? total / filteredProducts.length : 0;
    
    // Fix Math.max/Math.min with empty arrays
    const prices = filteredProducts.map(p => p.price);
    const maxPrice = prices.length > 0 ? Math.max(...prices) : 0;
    const minPriceActual = prices.length > 0 ? Math.min(...prices) : 0;
    
    return {
      total,
      average: average.toFixed(2),
      maxPrice,
      minPrice: minPriceActual,
      count: filteredProducts.length
    };
  }, [filteredProducts]);

  // Memoized categories list - only recalculates when products change
  const categories = React.useMemo(() => {
    console.log('📋 Extracting categories...');
    const cats = ['All', ...new Set(products.map(p => p.category))];
    return cats;
  }, [products]);

  return (
    <div className="container">
      <h1>📊 useMemo Data Processing</h1>
      
      <div className="controls">
        <div className="filter-group">
          <label>Category:</label>
          <select 
            value={selectedCategory} 
            onChange={(e) => setSelectedCategory(e.target.value)}
          >
            {categories.map(cat => (
              <option key={cat} value={cat}>{cat}</option>
            ))}
          </select>
        </div>
        
        <div className="filter-group">
          <label>Min Price: {'$'}{minPrice}</label>
          <input 
            type="range" 
            min="0" 
            max="1000" 
            value={minPrice}
            onChange={(e) => setMinPrice(Number(e.target.value))}
          />
        </div>
        
        <button onClick={() => setRerender(r => r + 1)} className="btn-secondary">
          Force Re-render ({rerender})
        </button>
      </div>

      <div className="stats-grid">
        <div className="stat-card">
          <h3>Total Products</h3>
          <div className="stat-value">{statistics.count}</div>
        </div>
        <div className="stat-card">
          <h3>Total Value</h3>
          <div className="stat-value">{'$'}{statistics.total}</div>
        </div>
        <div className="stat-card">
          <h3>Average Price</h3>
          <div className="stat-value">{'$'}{statistics.average}</div>
        </div>
        <div className="stat-card">
          <h3>Price Range</h3>
          <div className="stat-value">{'$'}{statistics.minPrice} - {'$'}{statistics.maxPrice}</div>
        </div>
      </div>

      <div className="products">
        <h3>Filtered Products ({filteredProducts.length})</h3>
        {filteredProducts.map(product => (
          <div key={product.id} className="product-card">
            <div className="product-info">
              <h4>{product.name}</h4>
              <p>{product.category}</p>
            </div>
            <div className="product-price">
              {'$'}{product.price}
            </div>
          </div>
        ))}
      </div>

      <div className="info">
        💡 Check the console to see when calculations run. They only run when dependencies change!
      </div>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<DataProcessor />);

Live Preview

Loading preview...

Key Takeaways

Essential useMemo concepts to remember

Memoizes Values

Returns same computed value between renders until dependencies change.

Performance Boost

Prevents expensive calculations from running on every render.

Dependency Array

Calculation only runs when dependencies in the array change.

Use Judiciously

Don't overuse! Only for truly expensive calculations.

Performance Tool!

useMemo is a performance optimization. Use it for expensive computations, data filtering, sorting, or any calculation that's costly and doesn't need to run on every render!

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

useCallback Hook

useLayoutEffect Hook

Building Your Learning Module...

useMemo Hook

Syntax

Without useMemo

With useMemo

When to Use?

useMemo

useCallback

Key Insight

Step 1: Import useMemo

Step 2: Wrap Expensive Calculation

Step 3: Use Dependencies Wisely

Step 4: Use in JSX

Data Processing with useMemo

Memoizes Values

Performance Boost

Dependency Array

Use Judiciously

Performance Tool!

useCallback Hook

useLayoutEffect Hook

useMemo Hook

Syntax

Without useMemo

With useMemo

When to Use?

useMemo

useCallback

Key Insight

Step 1: Import useMemo

Step 2: Wrap Expensive Calculation

Step 3: Use Dependencies Wisely

Step 4: Use in JSX

Data Processing with useMemo

Memoizes Values

Performance Boost

Dependency Array

Use Judiciously

Performance Tool!