useCallback Cached Callback
Last updated: 2026-11-02
useCallback Cached Callback
useCallback caches a function reference: while the dependencies stay the same it returns the same function. When you hand such a callback to a memoized child component it prevents the parent from re-rendering the child for nothing, because a freshly created function reference always breaks the shallow comparison inside memo. Outside such a consumer the cache buys nothing at all, so it is worth reaching for only when a stable reference is what actually matters.
| Group | Effects & Performance |
|---|---|
| Kind | Hook |
| Since | React 16.8 |
ℹ️ Info The editor transpiles JSX to JavaScript and renders the real UI in a sandbox; components mount automatically — no manual render call needed.
📝 Syntax
const handleClick = useCallback((id) => {
removeItem(id)
}, [removeItem]) // list the dependencies you use
// equivalent to useMemo(() => handleClick, deps)⚙️ Parameters
| fn | The function to cache (an event handler, a callback passed to a child component, and so on). |
|---|---|
| deps | The dependency array: any change returns a new function, otherwise the previous reference is returned. |
Returns：Returns the cached function reference: while the dependencies do not change, every render receives the same function.
▶ Example
The example runs out of the box: it auto-renders when expanded, and edits take effect instantly.
Output：
While you type in the input the console no longer prints "Rendered: Count +1" — the onClick reference is stable so the memoized child skips the re-render; clicking the button still increments the count.💡 Key Points
🏷️ More Effects & Performance
💡 Related Cases
📚 Related Tutorials
❓ FAQ
