useMemo

Code

import { useState, useMemo } from 'react';

function ProductList({ products, searchTerm, category }) {
    // Memoize filtered results
    const filtered = useMemo(() => {
        console.log('Filtering...');
        return products
            .filter(p => p.name.includes(searchTerm))
            .filter(p => p.category === category);
    }, [products, searchTerm, category]);

    // Memoize sort
    const sorted = useMemo(() => {
        return [...filtered].sort((a, b) => a.name.localeCompare(b.name));
    }, [filtered]);

    // Memoize stats
    const stats = useMemo(() => ({
        total: filtered.length,
        avgPrice: filtered.reduce((sum, p) => sum + p.price, 0) / filtered.length,
    }), [filtered]);

    return (
        <div>
            <p>Total: {stats.total}, Avg: {stats.avgPrice.toFixed(2)}</p>
            <ul>
                {sorted.map(p => <li key={p.id}>{p.name}</li>)}
            </ul>
        </div>
    );
}

// Avoid unnecessary memoization
function Bad({ data }) {
    // Simple computation doesn't need useMemo
    const length = data.length;
    return <div>{length}</div>;
}

// Reference stability
function Parent({ data }) {
    const processed = useMemo(() => data.map(d => d.value * 2), [data]);
    return <Child items={processed} />;
}

Explanation

useMemo caches computation results to avoid recalculation, recomputing only when dependencies change; used for expensive computations.

More React Snippets