useCallback Hook — Complete React Interview Guide

The reference stability problem

function Parent() {
  const [count, setCount] = useState(0)
 
  // New function object created on every render
  const handleClick = () => console.log('clicked')
 
  return <Child onClick={handleClick} />
}
 
// Even if Child is wrapped in React.memo:
const Child = React.memo(({ onClick }) => {
  console.log('Child rendered')
  return <button onClick={onClick}>Click</button>
})
 
// Child renders every time Parent renders
// because onClick is always a new function reference

How useCallback fixes it

function Parent() {
  const [count, setCount] = useState(0)
 
  // Same function reference until dependencies change
  const handleClick = useCallback(() => {
    console.log('clicked')
  }, [])  // no deps — never recreated
 
  return (
    <div>
      <Child onClick={handleClick} />
      <button onClick={() => setCount(c => c + 1)}>{count}</button>
    </div>
  )
}
 
const Child = React.memo(({ onClick }) => {
  console.log('Child rendered')  // only logs on mount now
  return <button onClick={onClick}>Click</button>
})
// Child no longer re-renders when count changes ✓

useCallback in useEffect dependencies

// Without useCallback — fetchData is new on every render → effect runs every render
function UserDashboard({ userId }) {
  const fetchData = () => fetch('/api/users/' + userId)  // new fn every render
 
  useEffect(() => {
    fetchData()
  }, [fetchData])  // fetchData always "changes" → infinite loop!
}
 
// With useCallback — effect only re-runs when userId changes
function UserDashboard({ userId }) {
  const fetchData = useCallback(() => {
    return fetch('/api/users/' + userId)
  }, [userId])  // new function only when userId changes
 
  useEffect(() => {
    fetchData()
  }, [fetchData])  // ✓ only runs when userId changes
}

Stale callbacks — missing dependencies

If a callback closes over state but doesn't list it in dependencies, the callback becomes stale:

function SearchBox() {
  const [query, setQuery] = useState('')
 
  // ✗ Stale — query is always '' inside handleSearch
  const handleSearch = useCallback(() => {
    searchAPI(query)  // query is stale!
  }, [])  // ← missing query
 
  // ✓ Add query to deps
  const handleSearch = useCallback(() => {
    searchAPI(query)
  }, [query])  // re-created when query changes
 
  // ✓ Alternative — useRef to break closure without deps
  const queryRef = useRef(query)
  useEffect(() => { queryRef.current = query }, [query])
  const handleSearch = useCallback(() => {
    searchAPI(queryRef.current)  // always current
  }, [])  // stable reference
}

When useCallback does NOT help

// ✗ Useless — Child is NOT React.memo'd
function Parent() {
  const handleClick = useCallback(() => doSomething(), [])
  return <Child onClick={handleClick} />  // not memoized
}
function Child({ onClick }) {  // re-renders when Parent re-renders — always
  return <button onClick={onClick}>Click</button>
}
// Child re-renders every time Parent does regardless of handleClick stability.
// useCallback added cost (comparison + cache) with zero benefit.
 
// ✗ Useless — function not in deps array
const fn = useCallback(() => doSomething(), [])
// fn is used as a click handler but not passed to memo'd component or useEffect
// Stable reference does nothing here

The complete decision tree

// Is the function passed to a React.memo child?
// YES → useCallback to prevent unnecessary re-renders
const memoChild = React.memo(Child)
const handler = useCallback(fn, deps)
<memoChild onAction={handler} />
 
// Is the function in a useEffect dependency array?
// YES → useCallback to prevent infinite loops
const fetchFn = useCallback(() => fetch(url), [url])
useEffect(() => { fetchFn() }, [fetchFn])
 
// Is the function passed to useCallback from a custom hook and consumers will put it in deps?
// YES → useCallback inside the hook
function useSearch(query) {
  const search = useCallback(() => fetchResults(query), [query])
  return { search }
}
 
// Everything else? → inline function is fine
<button onClick={() => setCount(c => c + 1)}>{count}</button>

The stable callback pattern — useRef + useCallback

A stable function reference that always calls the latest version of a callback — without listing dependencies:

// Problem: need stable reference BUT callback must always be current
// Solution: ref stores latest fn, stable wrapper calls it
 
function useStableCallback(fn) {
  const fnRef = useRef(fn)
 
  // Always update ref after render (not during — would cause issues)
  useEffect(() => { fnRef.current = fn })
 
  // Stable reference — never changes, always calls latest fn
  return useCallback((...args) => fnRef.current(...args), [])
}
 
// Usage
function Component({ onSuccess }) {
  const stableOnSuccess = useStableCallback(onSuccess)
 
  // Effect never re-runs due to onSuccess changes — stableOnSuccess is always stable
  useEffect(() => {
    const sub = subscribe(event => stableOnSuccess(event))
    return () => sub.unsubscribe()
  }, [stableOnSuccess])
}

React 19 introduces useEffectEvent as the official version of this pattern.

useCallback and the performance cost

useCallback allocates memory, runs comparison checks, and retains the previous function. It adds CPU and memory cost on every render. The net benefit is negative unless the cost of re-rendering the child component (or re-running the effect) is greater than the memoization overhead.

// Measuring the break-even:
// useCallback cost: ~0.5-2ms per render (comparison + cache)
// Prevented child re-render cost: depends on child complexity
 
// For a simple button: useCallback costs MORE than the re-render
// For an expensive chart component: useCallback saves 50ms+ per render