Real World Example

Real World: Flipkart filters and sorting

A product listing with thousands of items filters and sorts on every change of filter. useMemo keeps that work from re-running when something unrelated (like opening a menu) re-renders the page.

const visibleProducts = useMemo(() => {
  return products
    .filter((p) => p.category === category && p.price <= maxPrice)
    .sort((a, b) => (sortBy === 'price' ? a.price - b.price : b.rating - a.rating));
}, [products, category, maxPrice, sortBy]);