React useMemo Patterns Guide

The useMemo hook memoizes expensive computations to avoid recalculating on every render. Here's when and how to use it effectively.

Basic Usage#

import { useMemo, useState } from 'react';

function ExpensiveComponent({ items }: { items: number[] }) {
  const [filter, setFilter] = useState('');

  // Memoized - only recalculates when items changes
  const sortedItems = useMemo(() => {
    console.log('Sorting items...');
    return [...items].sort((a, b) => a - b);
  }, [items]);

  // NOT memoized - recalculates every render
  const total = items.reduce((sum, item) => sum + item, 0);

  return (
    <div>
      <input value={filter} onChange={(e) => setFilter(e.target.value)} />
      <ul>
        {sortedItems.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

Expensive Calculations#

import { useMemo, useState } from 'react';

function DataAnalytics({ data }: { data: DataPoint[] }) {
  const [selectedMetric, setSelectedMetric] = useState('revenue');

  // Expensive aggregation
  const statistics = useMemo(() => {
    console.log('Computing statistics...');

    const values = data.map((d) => d[selectedMetric]);

    return {
      sum: values.reduce((a, b) => a + b, 0),
      average: values.reduce((a, b) => a + b, 0) / values.length,
      min: Math.min(...values),
      max: Math.max(...values),
      median: calculateMedian(values),
      standardDeviation: calculateStdDev(values),
    };
  }, [data, selectedMetric]);

  return (
    <div>
      <select
        value={selectedMetric}
        onChange={(e) => setSelectedMetric(e.target.value)}
      >
        <option value="revenue">Revenue</option>
        <option value="users">Users</option>
        <option value="orders">Orders</option>
      </select>
      <div>
        <p>Sum: {statistics.sum}</p>
        <p>Average: {statistics.average.toFixed(2)}</p>
        <p>Min: {statistics.min}</p>
        <p>Max: {statistics.max}</p>
      </div>
    </div>
  );
}

Filtering and Sorting#

import { useMemo, useState } from 'react';

interface User {
  id: string;
  name: string;
  email: string;
  role: string;
  createdAt: Date;
}

function UserList({ users }: { users: User[] }) {
  const [search, setSearch] = useState('');
  const [sortBy, setSortBy] = useState<keyof User>('name');
  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc');
  const [roleFilter, setRoleFilter] = useState<string>('all');

  // Chain filtering and sorting
  const filteredAndSortedUsers = useMemo(() => {
    let result = [...users];

    // Filter by search
    if (search) {
      const searchLower = search.toLowerCase();
      result = result.filter(
        (user) =>
          user.name.toLowerCase().includes(searchLower) ||
          user.email.toLowerCase().includes(searchLower)
      );
    }

    // Filter by role
    if (roleFilter !== 'all') {
      result = result.filter((user) => user.role === roleFilter);
    }

    // Sort
    result.sort((a, b) => {
      const aVal = a[sortBy];
      const bVal = b[sortBy];

      if (aVal < bVal) return sortOrder === 'asc' ? -1 : 1;
      if (aVal > bVal) return sortOrder === 'asc' ? 1 : -1;
      return 0;
    });

    return result;
  }, [users, search, sortBy, sortOrder, roleFilter]);

  return (
    <div>
      <input
        placeholder="Search..."
        value={search}
        onChange={(e) => setSearch(e.target.value)}
      />
      <p>Showing {filteredAndSortedUsers.length} users</p>
      {filteredAndSortedUsers.map((user) => (
        <UserCard key={user.id} user={user} />
      ))}
    </div>
  );
}

Derived State#

import { useMemo, useState } from 'react';

interface CartItem {
  id: string;
  name: string;
  price: number;
  quantity: number;
}

function ShoppingCart({ items }: { items: CartItem[] }) {
  const [couponCode, setCouponCode] = useState('');

  // Derive multiple values from items
  const cartSummary = useMemo(() => {
    const subtotal = items.reduce(
      (sum, item) => sum + item.price * item.quantity,
      0
    );

    const itemCount = items.reduce((sum, item) => sum + item.quantity, 0);

    const discount = couponCode === 'SAVE20' ? subtotal * 0.2 : 0;

    const tax = (subtotal - discount) * 0.08;

    const total = subtotal - discount + tax;

    return {
      subtotal,
      itemCount,
      discount,
      tax,
      total,
    };
  }, [items, couponCode]);

  return (
    <div>
      <p>Items: {cartSummary.itemCount}</p>
      <p>Subtotal: ${cartSummary.subtotal.toFixed(2)}</p>
      {cartSummary.discount > 0 && (
        <p>Discount: -${cartSummary.discount.toFixed(2)}</p>
      )}
      <p>Tax: ${cartSummary.tax.toFixed(2)}</p>
      <p>Total: ${cartSummary.total.toFixed(2)}</p>
    </div>
  );
}

Object/Array Stability#

import { useMemo, memo } from 'react';

// Child component with memo
const ExpensiveChild = memo(function ExpensiveChild({
  config,
  items,
}: {
  config: { theme: string; size: string };
  items: string[];
}) {
  console.log('ExpensiveChild rendered');
  return <div>{/* ... */}</div>;
});

function Parent({ theme, size }: { theme: string; size: string }) {
  const [count, setCount] = useState(0);

  // Without useMemo: new object every render, child re-renders
  // const config = { theme, size };

  // With useMemo: stable reference, child doesn't re-render unnecessarily
  const config = useMemo(() => ({ theme, size }), [theme, size]);

  // Same for arrays
  const items = useMemo(() => ['a', 'b', 'c'], []);

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

Complex Data Transformations#

import { useMemo } from 'react';

interface RawData {
  timestamp: string;
  value: number;
  category: string;
}

interface ChartData {
  labels: string[];
  datasets: {
    label: string;
    data: number[];
  }[];
}

function Chart({ rawData }: { rawData: RawData[] }) {
  // Transform raw data to chart format
  const chartData = useMemo<ChartData>(() => {
    // Group by category
    const grouped = rawData.reduce((acc, item) => {
      if (!acc[item.category]) {
        acc[item.category] = [];
      }
      acc[item.category].push(item);
      return acc;
    }, {} as Record<string, RawData[]>);

    // Get unique timestamps for labels
    const labels = [...new Set(rawData.map((d) => d.timestamp))].sort();

    // Create datasets
    const datasets = Object.entries(grouped).map(([category, items]) => ({
      label: category,
      data: labels.map((label) => {
        const item = items.find((i) => i.timestamp === label);
        return item?.value ?? 0;
      }),
    }));

    return { labels, datasets };
  }, [rawData]);

  return <ChartComponent data={chartData} />;
}

Search Index#

import { useMemo, useState } from 'react';

interface Document {
  id: string;
  title: string;
  content: string;
  tags: string[];
}

function SearchableDocuments({ documents }: { documents: Document[] }) {
  const [query, setQuery] = useState('');

  // Build search index once
  const searchIndex = useMemo(() => {
    console.log('Building search index...');

    return documents.map((doc) => ({
      id: doc.id,
      searchText: [
        doc.title.toLowerCase(),
        doc.content.toLowerCase(),
        ...doc.tags.map((t) => t.toLowerCase()),
      ].join(' '),
      document: doc,
    }));
  }, [documents]);

  // Search is fast because index is ready
  const results = useMemo(() => {
    if (!query) return documents;

    const queryLower = query.toLowerCase();
    return searchIndex
      .filter((item) => item.searchText.includes(queryLower))
      .map((item) => item.document);
  }, [searchIndex, query]);

  return (
    <div>
      <input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search documents..."
      />
      <ul>
        {results.map((doc) => (
          <li key={doc.id}>{doc.title}</li>
        ))}
      </ul>
    </div>
  );
}

Context Value Memoization#

import { createContext, useContext, useMemo, useState } from 'react';

interface ThemeContextValue {
  theme: 'light' | 'dark';
  toggleTheme: () => void;
  colors: {
    primary: string;
    secondary: string;
    background: string;
  };
}

const ThemeContext = createContext<ThemeContextValue | null>(null);

function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [theme, setTheme] = useState<'light' | 'dark'>('light');

  // Memoize entire context value
  const value = useMemo<ThemeContextValue>(() => ({
    theme,
    toggleTheme: () => setTheme((t) => (t === 'light' ? 'dark' : 'light')),
    colors: theme === 'light'
      ? { primary: '#3b82f6', secondary: '#6b7280', background: '#ffffff' }
      : { primary: '#60a5fa', secondary: '#9ca3af', background: '#1f2937' },
  }), [theme]);

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

Lazy Computation#

import { useMemo, useState } from 'react';

function LazyComponent({ enabled }: { enabled: boolean }) {
  const [data, setData] = useState<Data | null>(null);

  // Only compute when enabled AND data exists
  const processedData = useMemo(() => {
    if (!enabled || !data) {
      return null;
    }

    console.log('Processing data...');
    return expensiveProcess(data);
  }, [enabled, data]);

  return (
    <div>
      {processedData && <Results data={processedData} />}
    </div>
  );
}

When NOT to Use useMemo#

// ❌ Don't memoize cheap operations
function BadExample({ name }: { name: string }) {
  // This is overkill - string concatenation is cheap
  const greeting = useMemo(() => `Hello, ${name}!`, [name]);

  return <p>{greeting}</p>;
}

// ❌ Don't memoize when value changes every render
function AnotherBadExample() {
  // Dependencies change every render, useMemo is useless
  const now = useMemo(() => new Date(), [Math.random()]);

  return <p>{now.toString()}</p>;
}

// ✅ Just compute directly for cheap operations
function GoodExample({ name }: { name: string }) {
  const greeting = `Hello, ${name}!`;

  return <p>{greeting}</p>;
}

Best Practices#

When to Use:
✓ Expensive calculations
✓ Complex data transformations
✓ Stable object/array references
✓ Context provider values

Indicators:
✓ Sorting/filtering large arrays
✓ Recursive calculations
✓ Parsing/formatting operations
✓ Building derived data structures

Performance:
✓ Profile before optimizing
✓ Keep dependency arrays minimal
✓ Consider computation cost vs memory
✓ Test with realistic data sizes

Avoid:
✗ Trivial calculations
✗ Primitive values
✗ Constantly changing dependencies
✗ Premature optimization

useMemo memoizes expensive computations to avoid recalculating on every render. Use it for expensive operations like sorting large arrays, complex data transformations, or creating stable object references for memoized children. Avoid using it for cheap calculations where the memoization overhead exceeds the computation cost. Always profile first and optimize based on actual performance needs.