#158 What is useMemo() hook in React?

• useMemo is a React hook that memoizes (caches) the result of a function.
• It recomputes the value only when its dependencies change, instead of recalculating on every render.
• This improves performance when you have expensive calculations or derived data.

---

🔹 Syntax

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

• computeExpensiveValue → expensive calculation function.
• [a, b] → dependencies, recompute only if they change.

---

🔹 Example Without useMemo (Problem: Slow Re-renders)

import React, { useState } from "react";

function ExpensiveComponent({ num }) {
  // ❌ Runs on every render
  const expensiveCalculation = (n) => {
    console.log("Calculating...");
    let result = 0;
    for (let i = 0; i < 1e7; i++) {
      result += n;
    }
    return result;
  };

  const result = expensiveCalculation(num);

  return <h3>Result: {result}</h3>;
}

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <ExpensiveComponent num={5} />
      <button onClick={() => setCount(count + 1)}>Re-render {count}</button>
    </div>
  );
}

👉 Every time you click the button, the expensive function re-runs unnecessarily.

---

🔹 Example With useMemo (Optimized ✅)

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

function ExpensiveComponent({ num }) {
  const expensiveCalculation = (n) => {
    console.log("Calculating...");
    let result = 0;
    for (let i = 0; i < 1e7; i++) {
      result += n;
    }
    return result;
  };

  // ✅ Recalculates ONLY if num changes
  const result = useMemo(() => expensiveCalculation(num), [num]);

  return <h3>Result: {result}</h3>;
}

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <ExpensiveComponent num={5} />
      <button onClick={() => setCount(count + 1)}>Re-render {count}</button>
    </div>
  );
}

👉 Now the calculation only happens when num changes, not when count changes.

---

🔹 When to Use useMemo()?

✅ Use when:

• You have expensive calculations (loops, filtering, sorting, etc.).
• You are deriving computed values from props/state.
• To prevent unnecessary re-renders in lists, tables, or charts.

❌ Avoid if:

• The calculation is cheap → adds unnecessary complexity.

---

🔹 Difference Between useMemo vs React.memo

• useMemo → Memoizes value (result of a function).
• React.memo → Memoizes entire component rendering.

---

✅ Short Interview Answer

“useMemo is a React hook used to memoize the result of expensive calculations and recompute them only when dependencies change. It helps improve performance by avoiding unnecessary recalculations on every render.”