#148 Difference between useMemo() and useCallback() hooks?

🔹 1. useMemo()

• Purpose → Memoizes (caches) the result of a function (a computed value).
• Returns → The cached value.
• Used for → Expensive calculations or derived data.

✅ Example:

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

function ExpensiveCalculation({ num }) {
  const squared = useMemo(() => {
    console.log("Calculating square...");
    return num * num; // expensive calculation
  }, [num]);

  return <h2>Square: {squared}</h2>;
}

export default function App() {
  const [count, setCount] = useState(0);
  return (
    <>
      <ExpensiveCalculation num={5} />
      <button onClick={() => setCount(count + 1)}>Re-render {count}</button>
    </>
  );
}

👉 Here, squared is memoized and recalculated only if num changes.
👉 Prevents unnecessary recalculations when unrelated state (count) changes.

---

🔹 2. useCallback()

• Purpose → Memoizes (caches) a function definition.
• Returns → The memoized callback function.
• Used for → Preventing re-creation of functions (useful when passing functions to child components).

✅ Example:

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

function Child({ onClick }) {
  console.log("Child rendered");
  return <button onClick={onClick}>Click Me</button>;
}

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

  // Without useCallback -> a new function is created on every render ❌
  // With useCallback -> memoized function reused ✅
  const handleClick = useCallback(() => {
    console.log("Button clicked");
  }, []);

  return (
    <>
      <h2>Count: {count}</h2>
      <Child onClick={handleClick} />
      <button onClick={() => setCount(count + 1)}>Increase Count</button>
    </>
  );
}

👉 handleClick will not be recreated on every re-render.
👉 Helps when passing functions to React.memo-wrapped child components.

---

🔹 Comparison Table

Feature	useMemo() 🟢	useCallback() 🔵
What it memoizes?	Value / Result of function	Function itself
Returns	Cached value	Cached function
Use Case	Expensive calculations (derived state, filtering, sorting)	Passing stable functions to child components to prevent re-renders
Example Use	const value = useMemo(() => compute(num), [num])	const fn = useCallback(() => doSomething(), [dep])

---

🔹 Easy Analogy

• useMemo → “Remember this answer.” ✅
• useCallback → “Remember this function.” ✅

---

✅ Interview Short Answer:

“useMemo memoizes a computed value, while useCallback memoizes a function. We use useMemo for expensive calculations, and useCallback when passing stable function references to prevent unnecessary re-renders.”