React — useMemo

Basic useMemo

import { useMemo } from 'react';

function ExpensiveComponent({ items }) {
    const sortedItems = useMemo(() => {
        return items.sort((a, b) => a - b);
    }, [items]);

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

useMemo for Expensive Calculations

function Fibonacci({ n }) {
    const fibonacci = useMemo(() => {
        const calc = (num) => {
            if (num <= 1) return num;
            return calc(num - 1) + calc(num - 2);
        };
        return calc(n);
    }, [n]);

    return <p>Fibonacci({n}) = {fibonacci}</p>;
}

useMemo vs useCallback

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

// useCallback - memoizes function
const memoizedCallback = useCallback(() => {
    doSomething(a, b);
}, [a, b]);

useMemo Examples

// Filtered list
function FilteredList({ items, filter }) {
    const filteredItems = useMemo(() => {
        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>
    );
}

// Expensive computation
function DataProcessor({ data }) {
    const processedData = useMemo(() => {
        console.log('Processing data...');
        return data.map(item => ({
            ...item,
            fullName: `${item.firstName} ${item.lastName}`,
            age: new Date().getFullYear() - item.birthYear
        }));
    }, [data]);

    return (
        <ul>
            {processedData.map(item => (
                <li key={item.id}>
                    {item.fullName} - Age: {item.age}
                </li>
            ))}
        </ul>
    );
}

// Sorted table
function SortedTable({ data, sortKey, sortOrder }) {
    const sortedData = useMemo(() => {
        return [...data].sort((a, b) => {
            if (sortOrder === 'asc') {
                return a[sortKey] > b[sortKey] ? 1 : -1;
            }
            return a[sortKey] < b[sortKey] ? 1 : -1;
        });
    }, [data, sortKey, sortOrder]);

    return (
        <table>
            <tbody>
                {sortedData.map(row => (
                    <tr key={row.id}>
                        <td>{row.name}</td>
                        <td>{row.value}</td>
                    </tr>
                ))}
            </tbody>
        </table>
    );
}

Mini Practice

Write React code that:

1. Uses useMemo for expensive calculations
2. Memoizes filtered data
3. Memoizes sorted data
4. Compares useMemo vs useCallback

Up Next

Next: Learn about useCallback hook.