React useMemo Guide

useMemo memoizes expensive calculations, recomputing only when dependencies change. Here's how to use it effectively.

Basic Usage#

import { useMemo, useState } from 'react';

function ExpensiveComponent({ items, filter }) {
  // Memoize expensive filtering
  const filteredItems = useMemo(() => {
    console.log('Filtering items...');
    return items.filter(item =>
      item.name.toLowerCase().includes(filter.toLowerCase())
    );
  }, [items, filter]);

  return (
    <ul>
      {filteredItems.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

// Without useMemo, filtering runs on every render
// With useMemo, it only runs when items or filter changes

When to Use useMemo#

// 1. Expensive calculations
function DataAnalytics({ data }) {
  const statistics = useMemo(() => {
    // Complex statistical calculations
    const sum = data.reduce((a, b) => a + b, 0);
    const mean = sum / data.length;
    const variance = data.reduce((acc, val) =>
      acc + Math.pow(val - mean, 2), 0
    ) / data.length;
    const stdDev = Math.sqrt(variance);

    return { sum, mean, variance, stdDev };
  }, [data]);

  return <Stats data={statistics} />;
}

// 2. Referential equality for objects/arrays
function Parent({ items }) {
  // Without useMemo: new array every render
  // const sortedItems = [...items].sort();

  // With useMemo: same reference if items unchanged
  const sortedItems = useMemo(() =>
    [...items].sort((a, b) => a.name.localeCompare(b.name)),
    [items]
  );

  // Child won't re-render unnecessarily
  return <MemoizedChild items={sortedItems} />;
}

// 3. Derived state
function UserProfile({ user, preferences }) {
  const displayConfig = useMemo(() => ({
    fullName: `${user.firstName} ${user.lastName}`,
    theme: preferences.darkMode ? 'dark' : 'light',
    locale: preferences.language || 'en',
    avatar: user.avatar || generateAvatar(user.name)
  }), [user, preferences]);

  return <Profile config={displayConfig} />;
}

Dependencies#

// All values used inside must be in dependencies
function SearchResults({ query, sortBy, filters }) {
  const results = useMemo(() => {
    let data = searchDatabase(query);

    // Apply filters
    if (filters.category) {
      data = data.filter(item => item.category === filters.category);
    }

    // Sort results
    return data.sort((a, b) => {
      if (sortBy === 'name') return a.name.localeCompare(b.name);
      if (sortBy === 'date') return new Date(b.date) - new Date(a.date);
      return 0;
    });
  }, [query, sortBy, filters]); // All dependencies listed

  return <ResultsList results={results} />;
}

// Object dependencies - be careful!
function Component({ config }) {
  // This recalculates every render if config is new object each time
  const processed = useMemo(() => process(config), [config]);

  // Better: depend on specific properties
  const processed2 = useMemo(() =>
    process(config.value, config.options),
    [config.value, config.options]
  );
}

useMemo vs useCallback#

// useMemo: memoizes a VALUE
const memoizedValue = useMemo(() => computeValue(a, b), [a, b]);

// useCallback: memoizes a FUNCTION
const memoizedFn = useCallback(() => doSomething(a, b), [a, b]);

// useCallback is equivalent to:
const memoizedFn2 = useMemo(() => () => doSomething(a, b), [a, b]);

// When to use which:
function Parent({ items }) {
  // useMemo for computed values
  const total = useMemo(() =>
    items.reduce((sum, item) => sum + item.price, 0),
    [items]
  );

  // useCallback for event handlers passed to children
  const handleClick = useCallback((id) => {
    console.log('Clicked:', id);
  }, []);

  return (
    <div>
      <Total value={total} />
      <ItemList items={items} onItemClick={handleClick} />
    </div>
  );
}

Referential Equality#

import { useMemo, memo } from 'react';

// Memoized child component
const ExpensiveChild = memo(function ExpensiveChild({ data, config }) {
  console.log('ExpensiveChild rendered');
  return <div>{/* expensive rendering */}</div>;
});

function Parent({ items }) {
  const [count, setCount] = useState(0);

  // Without useMemo: new object every render
  // ExpensiveChild re-renders even when only count changes
  // const config = { sortBy: 'name', order: 'asc' };

  // With useMemo: same reference, child doesn't re-render
  const config = useMemo(() => ({
    sortBy: 'name',
    order: 'asc'
  }), []);

  const processedItems = useMemo(() =>
    items.map(item => ({ ...item, processed: true })),
    [items]
  );

  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>
        Count: {count}
      </button>
      <ExpensiveChild data={processedItems} config={config} />
    </div>
  );
}

Conditional Memoization#

function DataTable({ data, viewMode }) {
  // Different calculations based on mode
  const processedData = useMemo(() => {
    if (viewMode === 'chart') {
      return data.map(item => ({
        x: item.date,
        y: item.value
      }));
    }

    if (viewMode === 'summary') {
      return {
        total: data.reduce((sum, item) => sum + item.value, 0),
        average: data.reduce((sum, item) => sum + item.value, 0) / data.length,
        count: data.length
      };
    }

    return data;
  }, [data, viewMode]);

  return viewMode === 'chart'
    ? <Chart data={processedData} />
    : <Table data={processedData} />;
}

Lazy Initialization#

// useMemo for expensive initial values
function HeavyComponent({ initialData }) {
  // This runs on every render without useMemo
  // const parsed = JSON.parse(initialData);

  // Only parse once (or when initialData changes)
  const parsed = useMemo(() => {
    console.log('Parsing JSON...');
    return JSON.parse(initialData);
  }, [initialData]);

  // For truly one-time initialization, consider useState
  const [data] = useState(() => JSON.parse(initialData));

  return <Display data={parsed} />;
}

// Complex object initialization
function FormBuilder({ schema }) {
  const formConfig = useMemo(() => {
    // Build form configuration from schema
    return schema.fields.map(field => ({
      ...field,
      validators: buildValidators(field.validation),
      formatter: buildFormatter(field.format),
      component: getFieldComponent(field.type)
    }));
  }, [schema]);

  return <DynamicForm config={formConfig} />;
}

Common Patterns#

// Sorting and filtering
function ProductList({ products, sortBy, filterBy }) {
  const displayProducts = useMemo(() => {
    let result = [...products];

    // Filter
    if (filterBy) {
      result = result.filter(p => p.category === filterBy);
    }

    // Sort
    result.sort((a, b) => {
      switch (sortBy) {
        case 'price-asc': return a.price - b.price;
        case 'price-desc': return b.price - a.price;
        case 'name': return a.name.localeCompare(b.name);
        default: return 0;
      }
    });

    return result;
  }, [products, sortBy, filterBy]);

  return <Grid products={displayProducts} />;
}

// Formatted display values
function PriceDisplay({ amount, currency, locale }) {
  const formatted = useMemo(() => {
    return new Intl.NumberFormat(locale, {
      style: 'currency',
      currency: currency
    }).format(amount);
  }, [amount, currency, locale]);

  return <span>{formatted}</span>;
}

// Context value
function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  // Memoize context value to prevent consumer re-renders
  const value = useMemo(() => ({
    theme,
    setTheme,
    isDark: theme === 'dark'
  }), [theme]);

  return (
    <ThemeContext.Provider value={value}>
      {children}
    </ThemeContext.Provider>
  );
}

When NOT to Use useMemo#

// DON'T: Simple calculations
function Component({ a, b }) {
  // Unnecessary - addition is fast
  const sum = useMemo(() => a + b, [a, b]);

  // Just do it directly
  const sum2 = a + b;
}

// DON'T: Primitive values
function Component({ name }) {
  // Strings are already compared by value
  const greeting = useMemo(() => `Hello, ${name}`, [name]);

  // Just use directly
  const greeting2 = `Hello, ${name}`;
}

// DON'T: When memoization cost exceeds benefit
function Component({ items }) {
  // If items rarely changes and computation is simple
  const count = useMemo(() => items.length, [items]);

  // Just access directly
  const count2 = items.length;
}

// DON'T: Non-deterministic values
function Component() {
  // Random values shouldn't be memoized
  const random = useMemo(() => Math.random(), []);
  // Will always return same value!
}

Debugging useMemo#

// Add logging to track recalculations
function Component({ data, filter }) {
  const filtered = useMemo(() => {
    console.log('useMemo recalculating:', { data, filter });
    return data.filter(item => item.includes(filter));
  }, [data, filter]);

  // Use React DevTools Profiler to see render causes

  return <List items={filtered} />;
}

// Check if dependencies are stable
function Component({ config }) {
  // Log to see if config changes
  useEffect(() => {
    console.log('Config changed:', config);
  }, [config]);

  const processed = useMemo(() => process(config), [config]);
}

Best Practices#

Use useMemo When:
✓ Expensive calculations
✓ Referential equality matters
✓ Preventing child re-renders
✓ Deriving complex state

Don't Use When:
✗ Simple calculations
✗ Primitive values
✗ Computation is cheap
✗ Value isn't used in renders

Dependencies:
✓ Include all values used inside
✓ Use specific properties, not objects
✓ Consider dependency stability
✓ Use ESLint exhaustive-deps rule

Performance:
✓ Profile before optimizing
✓ Measure actual impact
✓ Consider component structure
✓ Don't over-optimize

useMemo optimizes performance by memoizing expensive calculations and maintaining referential equality. Use it for computationally heavy operations, when passing objects/arrays to memoized children, or when deriving complex state. Always include all dependencies and profile your app to ensure memoization actually helps. Remember: premature optimization is the root of all evil - measure first, optimize second.