Q12- Difference between useMemo and useCallback. When would you use each?

The main difference between useMemo and useCallback in React is what they memoize:

• useMemo memoizes the result of a function.
• useCallback memoizes the function itself.

---

🧠 useMemo — Memoize a Value

Use it when a calculation is expensive and you want to avoid re-computing unless dependencies change.

import { useMemo } from "react";

function Example({ number }) {
  const squared = useMemo(() => {
    console.log("Calculating...");
    return number * number;
  }, [number]);

  return <div>{squared}</div>;
}

👉 Here, squared is only recalculated when number changes.

---

⚡ useCallback — Memoize a Function

Use it when you want to prevent a function from being recreated on every render (especially useful when passing functions to child components).

import { useCallback } from "react";

function Example({ onClick }) {
  const handleClick = useCallback(() => {
    console.log("Button clicked");
  }, []);

  return <button onClick={handleClick}>Click</button>;
}

👉 handleClick will have the same reference between renders.

---

✅ When to use:

• Use useMemo when you need to memoize a computed value.
• Use useCallback when you need to memoize a function to avoid unnecessary re-renders of child components.