React Js

What is useMemo?

useMemo is a React Hook that memoizes a calculated value so it’s only recomputed when necessary.

In plain English:

useMemo helps you avoid recalculating expensive values every time your component re-renders.

---

📦 Why use useMemo?

You should use useMemo when:

✅ You have a heavy/expensive calculation
✅ You want to avoid unnecessary recalculations
✅ You need to memoize derived data
✅ You want to improve performance in large apps

---

🔧 Syntax

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

• Runs the function only when dependencies (a or b) change
• Returns the cached result if dependencies haven’t changed

---

📌 Analogy

Let’s say you solve a hard math problem and write down the answer. If the input values don’t change, you don’t want to solve it again — you just look at your saved answer. That’s what useMemo does for your code!

---

✅ Example 1: Expensive Calculation

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

function ExpensiveComponent() {
  const [count, setCount] = useState(0);
  const [input, setInput] = useState('');

  const expensiveCalculation = (num) => {
    console.log('Calculating...');
    for (let i = 0; i < 1000000000; i++) {} // heavy loop
    return num * 2;
  };

  const calculatedValue = useMemo(() => expensiveCalculation(count), [count]);

  return (
    <div>
      <h2>Expensive Calculation</h2>
      <p>Result: {calculatedValue}</p>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <input value={input} onChange={(e) => setInput(e.target.value)} />
    </div>
  );
}

🔍 Explanation:

• The expensive calculation only runs when count changes
• Typing in the input doesn’t cause recalculation – because of useMemo

---

✅ Example 2: Filtered List

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

const items = ['apple', 'banana', 'orange', 'grape', 'mango'];

function FilteredList() {
  const [query, setQuery] = useState('');

  const filteredItems = useMemo(() => {
    return items.filter(item => item.toLowerCase().includes(query.toLowerCase()));
  }, [query]);

  return (
    <div>
      <h2>Fruit Filter</h2>
      <input
        placeholder="Search fruits"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
      />
      <ul>
        {filteredItems.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

💡 Without useMemo, this filter logic would run every time the component re-renders.

---

🔄 useMemo vs useCallback

Hook	Purpose
useMemo	Memoizes a value
useCallback	Memoizes a function

---

📋 Summary

Concept	Description
useMemo	Memoizes a return value
Recalculates	Only when dependencies change
Best for	Expensive calculations, derived data
Not for	Side effects (use useEffect instead)

---

⚠️ Common Mistakes

❌ Using useMemo for every value (only use it for costly logic)
❌ Forgetting to add dependencies
❌ Using it for side-effects (use useEffect instead)

---

🔥 Real World Use Cases

• Calculating totals in shopping cart apps
• Filtering large lists
• Generating dynamic chart data
• Deriving values from props or state

---