useMemo

Caches the result of a calculation between renders. It will only recompute the memoized value when one of the dependencies has changed.

Note: For lightweight operations, simply compute the value directly in the function component.

import { useState, useMemo } from 'react';

export const MyComponent = () => {
    const [products, setProducts] = useState([]);

    // Lightweight operation (performed for every render)
    const sortedProducts = lightSort(products);

    // Heavy operation (performed only when dependencies change)
    const heavySortedProducts = useMemo(() => heavySort(products), [products]);

    // ...
};