React's useCallback: Cache Functions, Not Just Values
useCallback gives you the same function instance across re-renders, as long as its dependencies are stable. This is key for optimizing child components with React.memo or preventing useEffect from re-running.
Why it exists
In JavaScript, functions are objects. When a React component re-renders, any function defined inside it is re-created. This new function object has a different memory reference, even if its code is identical. This breaks optimizations like React.memo, causing child components to re-render just because they received a 'new' function prop.
The mental model
Think of useCallback as giving your function a stable identity card. Without it, your function gets a new identity on every render. With useCallback, it keeps the same identity as long as the information it relies on (its dependencies) remains the same. This lets other parts of your app, like memoized components or useEffect, recognize it as the 'same' function across renders.
How it works
You wrap your function in useCallback and provide a dependency array: const memoizedFn = useCallback(fn, [dep1, dep2]). On the first render, React returns your function and caches it. On subsequent renders, React checks if any value in the dependency array has changed. If not, it returns the cached function instance. If a dependency has changed, it returns the newly created function and caches that one for future renders.
When to use it
The main use case is performance optimization. Use it when passing callbacks to child components wrapped in React.memo to prevent them from re-rendering unnecessarily. It is also essential when a function is a dependency of a hook like useEffect, to prevent the effect from re-running on every single render.
When not to use it
Do not wrap every function in useCallback. If a function is not passed to an optimized component or used as a hook dependency, the overhead of useCallback provides no benefit. For functions defined and used only within a single render, it's unnecessary complexity. Note that the upcoming React Compiler aims to automate this process, reducing the need for manual memoization.
One canonical example
A parent component renders a memoized <Button onClick={handleClick}>. If handleClick is defined directly in the parent, it's a new function on every render, causing the Button to re-render. By defining it as const handleClick = useCallback(() => { ... }, [dependencies]), the Button only re-renders when the dependencies actually change, because it receives the exact same function instance otherwise.
Interview question
What is the primary reason to use useCallback for a function in React?
- a.To ensure the function's execution is deferred until all component state updates are finalized.
- b.To automatically memoize the return value of the function, avoiding re-computation of expensive results.
- c.To prevent the function from being re-created in memory on every component re-render, thus stabilizing its reference.Correct
- d.To enable the function to access component state and props without needing to be passed them explicitly.
Why? this is the answer
useCallback's main purpose is to provide a stable reference to a function across re-renders, preventing it from being re-created each time. This is crucial for optimizing child components wrapped in React.memo or when a function is a dependency of a hook like useEffect. Option B describes the purpose of useMemo, which memoizes a value, not a function instance.
Just read this? Test yourself on what you have been reading.
Read the original → react.dev
- #react
- #hooks
- #performance
- #memoization
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react — each one lists the topics its interview covers.
See open roles