React Performance - useMemo

useMemo-when-to-use.tsx

import { useMemo } from "react";

/**
 * useMemo – When and Why to Use It
 *
 * ✅ Use useMemo when:
 * - You have an expensive calculation (loops, reduce, filter on large arrays)
 * - The result is derived from props or state
 * - The calculation should not re-run on every re-render
 *
 * ❌ Do NOT use useMemo when:
 * - The calculation is cheap
 * - The dependency changes every render
 * - You use it everywhere without measuring performance
 */

type IItem = {
  id: number;
  price: number;
};

type IProps = {
  items: IItem[];
};

export function TotalPrice({ items }: IProps) {
  const total = useMemo(() => {
    console.log("Calculating total...");
    return items.reduce((sum, item) => sum + item.price, 0);
  }, [items]);

  return <div>Total: {total}</div>;
}