Stabilize a callback prop
A memoized child receives a callback prop and should not re-render solely because the parent rendered again.
React 19+ · Hook
useCallback
useCallback caches a function definition between component renders. React reuses the cached function while its dependencies remain unchanged.
How it works
At the component or custom Hook’s top level, useCallback receives a function and every reactive value that function reads. React returns the initial function first, then reuses the previous function when dependencies are unchanged and supplies the current function when they differ.
Syntax
const cachedFn = useCallback(fn, dependencies)Parameters
| Name | Type | Description |
|---|---|---|
fn | function | The function definition to cache; it may accept any arguments and return any values. |
dependencies | Array | The list of reactive values referenced by fn, including props, state, and variables or functions declared in the component. |
Returns
On the first render, the supplied function; on later renders, either the previously stored function when dependencies are unchanged or the current function when they changed.
Key points
- It preserves a callback’s function identity across renders until its dependencies change.
- The Hook belongs at the component or custom Hook’s top level, following the Rules of Hooks.
- The dependency array should include every reactive value read by the callback.
- The first render returns the exact function supplied to the Hook.
- Later renders reuse the stored callback when dependencies remain equal.
- React compares dependency values with Object.is to decide whether the cached function can be reused.
Common mistakes
- Call useCallback only at the top level of a component or custom Hook; do not place it inside a loop or conditional.
- The cache is an optimization rather than a semantic guarantee; code must remain correct even if React discards the cached function.
Example: Stable callback for a memoized child
import { memo, useCallback, useState } from 'react';
const Button = memo(function Button({ onClick }: { onClick: () => void }) {
return <button onClick={onClick}>Save</button>;
});
export default function Form() {
const [saved, setSaved] = useState(false);
const handleSave = useCallback(() => {
setSaved(true);
}, []);
return (
<>
<Button onClick={handleSave} />
{saved && <p>Saved</p>}
</>
);
}The cached callback keeps the same identity while its dependencies remain unchanged, allowing the memoized button to skip unnecessary re-renders.
When to use it
Control Hook dependencies
A callback is included in another Hook’s dependency list and should change only when its reactive inputs change.
Avoid unnecessary resubscriptions
An external subscription API uses callback identity to determine whether it must resubscribe.
Interview questions
QWhat does useCallback do?
useCallback caches a function definition between renders. It returns the original function on the first render, then reuses it when the dependency list has not changed.
Follow-up: Why can this matter for a child component? A stable callback prop can help a memoized child avoid a re-render caused only by function identity changing.
QHow should dependencies be chosen?
The dependency list contains every reactive value referenced by the callback, including props, state, and variables or functions declared in the component. React compares dependencies with Object.is.
Follow-up: What happens when one dependency changes? React returns the function created during the current render and stores it for later reuse.
QWhen is useCallback useful?
useCallback is most useful when a cached function is passed to a component wrapped in memo, or when its identity is itself used as a dependency of another Hook. It is not a general requirement for every event handler.
Follow-up: What should be tried first when a component is slow? Profile the application and optimize the actual bottleneck rather than adding memoization indiscriminately.
Related
memouseMemouseEffectuseSyncExternalStoreexhaustive-deps