Interview Answer (Short)

useMemo() is used to cache the result of an expensive computation and returns a value, while useCallback() is used to cache a function and returns a function reference. I use useMemo() for derived data like totals, filters, and sorting, and useCallback() when passing functions to child components to prevent unnecessary re-renders.

Difference Between useMemo() and useCallback()

Feature	useMemo()	useCallback()
Returns	A value	A function
Purpose	Cache expensive calculations	Cache function references
Executes	Executes function and stores result	Stores function itself
Used For	Computed values	Event handlers, callbacks
Return Type	Any value	Function

---

useMemo()

Used to memoize a calculated value.

Syntax

const result = useMemo(() => {
  return expensiveCalculation();
}, [dependencies]);

Example

import { useMemo, useState } from "react";

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

  const total = useMemo(() => {
    console.log("Calculating...");
    return count * 100;
  }, [count]);

  return (
    <>
      <h2>{total}</h2>

      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </>
  );
}

Output

Calculating...

Runs only when count changes.

---

useCallback()

Used to memoize a function.

Syntax

const handleClick = useCallback(() => {
  // function code
}, [dependencies]);

Example

import { useCallback, useState } from "react";

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

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

  return (
    <>
      <button onClick={save}>
        Save
      </button>
    </>
  );
}

The same function reference is reused across renders.

---

Real Interview Example

Without useCallback()

function Parent() {

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

  const save = () => {
    console.log("save");
  };

  return (
    <>
      <Child save={save} />
    </>
  );
}

Every render creates a new function:

save() → New Memory
save() → New Memory
save() → New Memory

Child component re-renders unnecessarily.

---

With useCallback()

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

Now React reuses the same function reference.

save() → Same Memory
save() → Same Memory
save() → Same Memory

Better performance when passing callbacks to child components.

---

Easy Way to Remember

useMemo → Memorize VALUE

const total = useMemo(() => {
  return price * quantity;
}, [price, quantity]);

Returns:

5000

A value.

---

useCallback → Memorize FUNCTION

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

Returns:

function save() {}

A function.

---

Practical Example Together

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

function Product() {
  const [qty, setQty] = useState(1);

  const total = useMemo(() => {
    return qty * 500;
  }, [qty]);

  const buyNow = useCallback(() => {
    alert(`Total: ${total}`);
  }, [total]);

  return (
    <>
      <h2>Total: {total}</h2>

      <button onClick={() => setQty(qty + 1)}>
        Increase Qty
      </button>

      <button onClick={buyNow}>
        Buy Now
      </button>
    </>
  );
}

• useMemo() caches the calculated total.
• useCallback() caches the buyNow function.