useCallback in React Explained: Avoiding Unnecessary Re-renders

useCallback in React Explained: Avoiding Unnecessary Re-renders

useCallback memoizes a function so its reference stays stable across renders. Here is what it does and when to use it.

What useCallback Does

useCallback takes a function and a dependency array, and returns the same function reference across renders unless a dependency changes. Without it, a new function is created on every render.

When to Use It

Use useCallback when you pass a function as a prop to a child wrapped in React.memo. The stable reference prevents the child from re-rendering just because the parent created a new function.

When Not to Use It

Do not wrap every function in useCallback. For functions used only inside the same component, the new reference is fine and useCallback adds overhead for no benefit.

The Dependency Array

Include every value used in the function that can change. If you miss one, the function uses a stale value; if you include too much, it recreates unnecessarily.

For Event Handlers

useCallback is also useful for event handlers that depend on state or props and are passed down. The stable reference means children using them in effects or memoization do not re-render or re-run unnecessarily.

vs useMemo

useMemo memoizes a value. useCallback memoizes a function. They are related but distinct; useCallback is essentially useMemo for a function reference.

The Common Mistake

Wrapping every handler in useCallback 'just in case.' Measure with the Profiler first. If a child is not wrapped in React.memo and re-rendering is cheap, useCallback adds overhead without benefit.

The Takeaway

useCallback keeps a function reference stable across renders. Use it when passing functions to memoized children to prevent unnecessary re-renders, but only when there is a measured reason.