Q297- How do useCallback, React memo, and useMemo help solve rendering and performance issues?

React re-renders components when state, props, or context change.
Sometimes, components re-render even when nothing meaningful has changed.
These tools help avoid unnecessary re-renders and recomputations.

---

✅ 1. React.memo() — Prevents Unnecessary Component Re-renders

🔹 What it does:

• Memoizes a component
• Re-renders only when props change (shallow comparison)

const Child = React.memo(({ value }) => {
  console.log("Child rendered");
  return <p>{value}</p>;
});

✔ Parent re-render ≠ child re-render
✔ Best for pure presentational components

---

✅ 2. useCallback() — Memoizes Functions

🔹 Problem:

Functions are re-created on every render, causing child re-renders.

🔹 Solution:

useCallback returns the same function reference unless dependencies change.

const handleClick = useCallback(() => {
  console.log("Clicked");
}, []);

✔ Prevents child re-renders when passing callbacks
✔ Useful with React.memo

---

✅ 3. useMemo() — Memoizes Expensive Calculations

🔹 Problem:

Heavy calculations run on every render.

🔹 Solution:

useMemo caches the computed value.

const sortedData = useMemo(() => {
  return data.sort();
}, [data]);

✔ Avoids unnecessary recalculation
✔ Improves render speed

---

🔥 How They Work Together (Real Scenario)

const Child = React.memo(({ onClick, value }) => {
  return <button onClick={onClick}>{value}</button>;
});

function Parent() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    console.log("Clicked");
  }, []);

  const doubled = useMemo(() => count * 2, [count]);

  return (
    <>
      <p>{doubled}</p>
      <Child onClick={handleClick} value="Click" />
      <button onClick={() => setCount(count + 1)}>+</button>
    </>
  );
}

✔ React.memo → avoids child re-render
✔ useCallback → stable function reference
✔ useMemo → avoids recalculation

---

🆚 Quick Comparison

Tool	What it Optimizes	Use Case
React.memo	Component renders	Pure components
useCallback	Function reference	Callbacks to children
useMemo	Computed values	Expensive calculations

---

❌ When NOT to Use Them

• Simple components
• Cheap calculations
• Premature optimization

Overuse can make code harder to read.

---

🎯 Short Interview Answer

React.memo prevents unnecessary component re-renders when props don’t change.
useCallback memoizes functions to avoid re-creating callbacks on each render.
useMemo memoizes expensive calculations to prevent redundant computation.
Together, they optimize performance by reducing unnecessary renders and calculations.

---

⭐ One-Line Summary

React.memo saves renders, useCallback saves function references, and useMemo saves computation.