useCallback: Cache Functions Between Renders

Why it exists

In JavaScript, functions are objects. A function defined inside a React component is recreated as a new object on every single render. This new reference breaks reference equality checks, defeating optimizations like React.memo that rely on stable props to prevent re-renders.

The mental model

Think of useCallback as giving your function a stable memory address. Without it, your component creates a new, identical-looking function at a new address every time it renders. For a child component receiving this function as a prop, it looks like a brand new prop every time, forcing it to re-render even if nothing has visually changed.

How it works

You wrap your function definition in useCallback and provide a dependency array. On the initial render, React returns your function and caches it. On subsequent renders, React compares each item in the dependency array with its previous value. If no dependencies have changed, React returns the cached function from the previous render. If any dependency has changed, it returns the newly created function and caches that one for future renders.

When to use it

The primary use case is passing a callback to an expensive child component that is wrapped in React.memo. This ensures the child component only re-renders when its props actually change, not just because the parent rendered. It's also essential when a function is a dependency of another hook like useEffect, preventing the effect from running on every render.

When not to use it

Do not wrap every function in useCallback. It adds a small amount of complexity and overhead. If a function is not passed to a memoized component or used in a hook's dependency array, using useCallback is often a premature optimization. Note that the upcoming React Compiler aims to automate this, reducing the need for manual memoization.

One canonical example

A ProductPage component passes a handleSubmit function to a memoized ShippingForm. The function is defined as: const handleSubmit = useCallback((details) => { post('/buy', { productId, details }); }, [productId]);. Without useCallback, ShippingForm would re-render every time ProductPage does, because handleSubmit would be a new function object. With useCallback, it only gets a new function if productId changes.