mediumFrontend

What is the difference between useMemo and useCallback?

Q: What is the difference between useMemo and useCallback?

**Core concept (TL;DR).** Both memoize across renders to preserve **referential stability**, keyed by a dependency array. useMemo caches a computed **value**; useCallback caches a **function**. In fact useCallback(fn, deps) is exactly useMemo(() => fn, deps) . Cache a value vs cache a function useMemo(fn, deps) <text x="135" y="90" fill="currentColo

750 views

Understand the problem

Both hooks are used for memoization, but they target different types of values.

hooksperformanceoptimization

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Memoize a value and a callback

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

export default function App() {
  const [nums] = useState([5, 2, 8, 1, 9, 3]);
  const [tick, setTick] = useState(0);

  // value cache: only re-sorts when 'nums' changes, not when 'tick' does
  const sorted = useMemo(() => [...nums].sort((a, b) => a - b), [nums]);

  // function cache: stable identity across renders (deps [])
  const onClick = useCallback(() => setTick((t) => t + 1), []);

  return (
    <div style={{ padding: 24, fontFamily: "system-ui" }}>
      <p>sorted: {sorted.join(", ")}</p>
      <button onClick={onClick}>re-render ({tick})</button>
    </div>
  );
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

What is the difference between controlled and uncontrolled components?

How do you handle routing in React applications?