What is the useCallback Hook in React?
Understand React's useCallback Hook: how it memoizes functions, why stable references stop re-renders, when to use it, pitfalls and clear code examples.
Expected Interview Answer
useCallback is a React Hook that memoizes a function definition, returning the same function reference between renders as long as its dependencies stay the same.
Every render normally creates brand-new function instances, so a callback passed to a child gets a fresh identity each time. useCallback(fn, [deps]) caches that function and only rebuilds it when a dependency changes. This matters when the function is passed to a component wrapped in React.memo, or used in another hook's dependency array, because a stable reference prevents needless re-renders and effect re-runs. It is essentially useMemo specialized for functions: useCallback(fn, deps) equals useMemo(() => fn, deps).
- Keeps a stable function identity across renders
- Prevents re-renders of React.memo children
- Stops effects from re-running due to changing callbacks
- Makes dependency arrays predictable
- Reduces wasted reconciliation work
AI Mentor Explanation
Think of a team that reissues every player a brand-new jersey number before each over. Teammates who key off those numbers get confused and re-coordinate constantly. useCallback is like keeping each player's number fixed across overs unless the squad actually changes, so anyone relying on that identity — the memoized child — isn't forced to react to a false change.
Step-by-Step Explanation
Step 1
Spot the callback passed down
Find a function handed to a React.memo child or used inside another hook's dependency array.
Step 2
Wrap it in useCallback
Write const handler = useCallback((e) => doThing(id, e), [id]) to cache the function.
Step 3
Declare dependencies
List every reactive value the function reads so it rebuilds only when those change.
Step 4
Pair with React.memo
Ensure the receiving child is memoized; otherwise the stable reference brings no benefit.
Step 5
Verify with the profiler
Confirm the child stops re-rendering and remove useCallback if it isn't earning its keep.
What Interviewer Expects
- Understanding that functions get new identities each render
- Correct useCallback syntax and dependency handling
- Knowing it only helps alongside React.memo or hook dependencies
- The equivalence useCallback(fn, deps) === useMemo(() => fn, deps)
- Awareness of overuse costs
Common Mistakes
- Using useCallback without a memoized child, gaining nothing
- Missing dependencies and capturing stale variables
- Assuming it improves performance everywhere by default
- Confusing it with useMemo which caches values not functions
- Wrapping trivial inline handlers unnecessarily
Best Answer (HR Friendly)
“useCallback is a React tool that keeps the same version of a function around between screen updates instead of building a new one each time. That stability stops child components from redoing work unnecessarily, which helps performance.”
Code Example
import { useCallback, useState, memo } from 'react'
const Row = memo(function Row({ id, onSelect }) {
console.log('render', id)
return <button onClick={() => onSelect(id)}>Select {id}</button>
})
function List({ items }) {
const [selected, setSelected] = useState(null)
// Same reference across renders unless nothing it needs changes
const handleSelect = useCallback((id) => {
setSelected(id)
}, [])
return items.map((item) => (
<Row key={item.id} id={item.id} onSelect={handleSelect} />
))
}Follow-up Questions
- How is useCallback related to useMemo?
- Does useCallback help if the child is not wrapped in React.memo?
- What happens if you forget a dependency in useCallback?
- Why do functions get new identities on every render?
- When does useCallback add more overhead than it saves?
MCQ Practice
1. What does useCallback memoize?
useCallback returns a memoized function whose identity stays stable until a dependency changes.
2. useCallback(fn, deps) is equivalent to which expression?
useCallback is a specialization of useMemo that memoizes the function itself rather than its result.
3. useCallback provides a real benefit mainly when the function is...
A stable reference only matters when something downstream compares identities, like React.memo or a dependency array.
Flash Cards
What does useCallback return? — A memoized function whose reference stays stable until its dependencies change.
useCallback equivalence? — useCallback(fn, deps) is the same as useMemo(() => fn, deps).
When is useCallback useful? — When the function is passed to a React.memo child or used in another hook's dependency array.
Common useCallback mistake? — Using it without a memoized consumer, so the stable identity buys nothing.