#20 useMemo() Hook in React

useMemo is a React Hook used to memoize (cache) the result of a computation, preventing unnecessary recalculations during re-renders unless its dependencies change.

---

🔹 Syntax:

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

---

🔹 When to Use:

• When you have an expensive calculation inside your component.
• To prevent re-computation of values unless dependencies change.
• To improve performance in components that render frequently.

---

🔹 Example:

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

function ExpensiveComponent({ number }) {
  const [count, setCount] = useState(0);

  const expensiveValue = useMemo(() => {
    console.log("Calculating...");
    let result = 0;
    for (let i = 0; i < 1e8; i++) {
      result += number;
    }
    return result;
  }, [number]);

  return (
    <div>
      <p>Expensive Value: {expensiveValue}</p>
      <button onClick={() => setCount(count + 1)}>Increment: {count}</button>
    </div>
  );
}

expensiveValue only recalculates when number changes, not on every render.

---

📝 In Summary:

• useMemo improves performance by memoizing expensive calculations.
• It avoids unnecessary re-renders by caching values.
• Only recomputes when dependencies change.