✅ What is useMemo Hook in React?

The useMemo hook in React is used to cache (memoize) the result of a calculation between component renders. React will only recompute the memoized value when one of the specified dependencies changes. This makes useMemo especially useful for expensive computations and for maintaining stable derived values that should not be recalculated on every render.
In simple terms: recalculate only when the inputs change.

🚀 Syntax

const memoizedValue = useMemo(createFn, deps);

createFn: A pure function that returns the value to cache.
deps: Dependency array. When any dependency changes, createFn runs again.

🧠 When to Use useMemo

When performing expensive calculations (sorting large arrays, complex math, heavy filtering).
When computing derived data that is passed to child components.
When you need stable object or array references in dependency arrays.

❌ When NOT to Use useMemo

For cheap or trivial calculations.
For side effects (use useEffect instead).
As a default optimization—always measure performance before adding memoization.

🔧 Example 1: Expensive Calculation

import React, { useMemo, useState } from "react";

function isPrime(n) {
  if (n < 2) return false;
  for (let i = 2; i * i <= n; i++) {
    if (n % i === 0) return false;
  }
  return true;
}

function countPrimes(upTo) {
  let count = 0;
  for (let i = 2; i <= upTo; i++) {
    if (isPrime(i)) count++;
  }
  return count;
}

export default function PrimeCounter() {
  const [n, setN] = useState(40000);
  const [theme, setTheme] = useState("light");

  const primeCount = useMemo(() => countPrimes(n), [n]);

  return (
    <div>
      <input
        type="number"
        value={n}
        onChange={(e) => setN(Number(e.target.value))}
      />
      <button onClick={() => setTheme(t => t === "light" ? "dark" : "light")}>
        Toggle theme ({theme})
      </button>
      <p>Primes ≤ {n}: {primeCount}</p>
    </div>
  );
}

Here, changing the theme does not trigger a recalculation of primeCount. It only recomputes when n changes.

🔄 Example 2: Derived List (Filter and Sort)

import React, { useMemo, useState } from "react";

export default function ProductList({ products }) {
  const [query, setQuery] = useState("");
  const [sortBy, setSortBy] = useState("price");

  const visibleProducts = useMemo(() => {
    const q = query.toLowerCase();
    const filtered = products.filter(p =>
      p.name.toLowerCase().includes(q)
    );

    return [...filtered].sort((a, b) => {
      if (sortBy === "price") return a.price - b.price;
      return a.name.localeCompare(b.name);
    });
  }, [products, query, sortBy]);

  return (
    <div>
      <input
        placeholder="Search…"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
      />
      <select value={sortBy} onChange={(e) => setSortBy(e.target.value)}>
        <option value="price">Price</option>
        <option value="name">Name</option>
      </select>

      <ul>
        {visibleProducts.map(p => (
          <li key={p.id}>
            {p.name} — ₹{p.price}
          </li>
        ))}
      </ul>
    </div>
  );
}

The filtering and sorting logic only runs when products, query, or sortBy changes.

📊 Example 3: Stabilizing Object Identity

import React, { useMemo } from "react";
import Chart from "./Chart";

export default function Dashboard({ data, currency }) {
  const options = useMemo(() => ({
    currency,
    showLegend: true
  }), [currency]);

  return <Chart data={data} options={options} />;
}

Without useMemo, the options object would be recreated on every render, potentially causing unnecessary re-renders in the Chart component.

✅ Best Practices and Pitfalls

Always include all dependencies used inside the memoized function.
Keep the logic pure—no state updates, DOM access, or API calls inside useMemo.
React may discard memoized values under memory pressure, so code should still work if recomputed.
Use useMemo sparingly and only after identifying performance issues.
For memoizing functions, prefer useCallback for clarity.

📚 useMemo vs useCallback

useMemo: Returns a memoized value (result of a computation).
useCallback: Returns a memoized function (stable function reference).

🧾 Conclusion

The useMemo hook is a powerful performance optimization tool in React that helps avoid unnecessary recalculations and re-renders. It is most effective for expensive computations and referential stability but should be used thoughtfully. Combined with useCallback, React.memo, and proper profiling, useMemo helps you build fast, efficient, and scalable React applications.

React useMemo Hook Explained with Examples