Interview answer drill

Use this React interview question to rehearse a quick answer, common mistake, follow-up, and production pitfall.

Practice interview questions Follow 30-day foundations study plan Practice more React interview questions

What is the difference between useMemo() and useCallback()?Frontend interview answer

HighIntermediateReact

By FrontendAtlas Team · Updated Jan 30, 2026

Interview focus

This React interview question tests whether you can explain useMemo vs useCallback in React: what is the difference, connect it to production trade-offs, and handle common follow-up questions.

useMemo vs useCallback in React: what is the difference explanation without falling back to memorized docs wording
Memoization and Callbacks reasoning, edge cases, and production failure modes
How you would answer the most likely React interview follow-up

Practice more React interview questions

Interview quick answer

useMemo memoizes a computed value; useCallback memoizes a function reference. Use them to avoid expensive recalculations or re-renders, but only when it actually helps.

Full interview answer

Overview

useMemo() and useCallback() help improve performance by caching results or function references between re-renders. React components re-render when their props or state change, and these hooks prevent expensive re-computations or re-creations that could slow the app down.

Hook	Purpose	Returns	Use Case
useMemo()	Memoizes a computed value to avoid recalculating it every render.	A cached value.	When you have an expensive calculation that depends on specific values.
useCallback()	Memoizes a function so it retains the same reference between renders.	A memoized function.	When passing callback props to child components to prevent unnecessary re-renders.

Key differences between useMemo() and useCallback()

JSX

// useMemo example
const total = useMemo(() => {
  console.log('Calculating total...');
  return items.reduce((sum, item) => sum + item.price, 0);
}, [items]);

// useCallback example
const handleClick = useCallback(() => {
  console.log('Button clicked');
}, []);

Detailed Explanation

useMemo() recalculates a value only when dependencies change. It’s ideal for optimizing expensive computations like filtering large datasets or formatting lists.
useCallback() returns the same function reference between renders unless its dependencies change. It’s most useful when passing callbacks to memoized child components.

Performance Tip
Both hooks should be used selectively. Overusing them can make code complex without significant performance gain. They are primarily helpful in preventing unnecessary renders and optimizing heavy computations.

JSX

// Combined example
function ProductList({ products }) {
  const [query, setQuery] = useState('');

  const filteredProducts = useMemo(() => {
    return products.filter((p) => p.name.toLowerCase().includes(query.toLowerCase()));
  }, [products, query]);

  const handleChange = useCallback((e) => {
    setQuery(e.target.value);
  }, []);

  return (
    <div>
      <input value={query} onChange={handleChange} placeholder='Search products' />
      <ul>{filteredProducts.map((p) => <li key={p.id}>{p.name}</li>)}</ul>
    </div>
  );
}

Analogy
useMemo() is like remembering the result of a long math calculation so you don’t recalculate it unless the inputs change. useCallback() is like remembering the function you used to do the calculation so you don’t create it again each time.

useMemo() optimizes values, useCallback() optimizes functions — both help React skip unnecessary work and maintain stable references.

Summary

useMemo() caches computed values.
useCallback() caches function definitions.
Both improve performance by avoiding redundant work and reducing re-renders.