React: What is the difference between useCallback and useMemo?

useCallback and useMemo are both memoization hooks in React, but they serve fundamentally different purposes and operate on different types of values.

useCallback(fn, deps) — returns a memoized function reference that only changes when one of its dependencies changes. The function body itself is not re-created on every render.

useMemo(() => value, deps) — returns a memoized computed value (the return value of the function you pass to it). The computation only runs again when dependencies change.

How they work under the hood: When a component re-renders, React evaluates the dependency array of both hooks. If all dependencies are the same (by Object.is comparison), the hook returns its cached result without re-computing. If any dependency has changed, the hook re-runs and stores the new result.

Key difference in one sentence:

• useCallback = memoizes the function reference itself
• useMemo = memoizes the return value of a computation

When to use useCallback:

• Passing callbacks to child components wrapped in React.memo — without useCallback, a new function reference is created every render, defeating the memo check
• Functions used as dependencies in useEffect — prevents the effect from re-running unnecessarily
• Event handlers passed as props that shouldn't cause child re-renders
• Functions used as dependencies for useMemo or other hooks

When to use useMemo:

• Expensive computations such as sorting, filtering, or transforming large arrays
• Creating objects or arrays passed as props to memoized children (to maintain referential equality)
• Derived state that requires computation from props or other state
• Preventing unnecessary re-creation of complex data structures

Complete code example:

1import { useState, useCallback, useMemo, memo } from "react";
2
3// Memoized child — only re-renders when props change
4const TodoList = memo(({ todos, onDelete }) => {
5  console.log("TodoList rendered");
6  return (
7    <ul>
8      {todos.map(todo => (
9        <li key={todo.id}>
10          {todo.text}
11          <button onClick={() => onDelete(todo.id)}>Delete</button>
12        </li>
13      ))}
14    </ul>
15  );
16});
17
18function App() {
19  const [todos, setTodos] = useState([
20    { id: 1, text: "Learn React" },
21    { id: 2, text: "Build a project" },
22  ]);
23  const [filter, setFilter] = useState("");
24
25  // useCallback: stable function reference
26  const handleDelete = useCallback((id: number) => {
27    setTodos(prev => prev.filter(t => t.id !== id));
28  }, []); // empty deps — function never changes
29
30  // useMemo: expensive filtered/sorted computation
31  const filteredTodos = useMemo(() => {
32    console.log("Filtering todos...");
33    return todos
34      .filter(t => t.text.toLowerCase().includes(filter.toLowerCase()))
35      .sort((a, b) => a.text.localeCompare(b.text));
36  }, [todos, filter]);
37
38  return (
39    <div>
40      <input
41        value={filter}
42        onChange={e => setFilter(e.target.value)}
43        placeholder="Filter todos..."
44      />
45      <TodoList todos={filteredTodos} onDelete={handleDelete} />
46    </div>
47  );
48}

Common mistake — unnecessary memoization: Not every function or value needs to be memoized. Overuse adds overhead (hook comparison logic, closure maintenance) that can actually hurt performance for simple cases.

Rule of thumb: Only use these hooks when you have measurable performance issues — typically visible in React DevTools Profiler as unnecessary re-renders of expensive child components.