React Hooks
React useCallback Hook
useCallback returns a memoised version of a function that keeps the same identity between renders until its dependencies change. It matters when a function is passed to a memoised child or used as an effect dependency.
What is useCallback Hook in React?
useCallback returns a memoised version of a function that keeps the same identity between renders until its dependencies change. It matters when a function is passed to a memoised child or used as an effect dependency.
Why useCallback Hook matters
Functions declared in a component body are recreated on every render. A new identity makes React.memo comparisons fail and makes dependent effects re-run, quietly undoing your optimisations.
useCallback Hook example
const handleSave = useCallback((id) => {
setSaved(prev => [...prev, id]);
}, []); // no dependencies — setSaved is stable
<JobCard job={job} onSave={handleSave} /> // JobCard is wrapped in memoHow this works
The functional state update means the callback never reads saved directly, so it needs no dependencies and its identity never changes — which is exactly what the memoised child needs.
Key points to remember
- Only useful when the function identity is observed — by memo, an effect, or another hook.
- State setters from useState and dispatch from useReducer are already stable.
- Prefer functional updates so the callback needs fewer dependencies.
Common mistakes with useCallback Hook
- Wrapping every handler in useCallback when nothing downstream is memoised — pure overhead.
- Listing a dependency that changes every render, so the callback is recreated anyway.
React useCallback Hook— Interview Questions & FAQs
Do I need useCallback for every event handler?+
No. It only helps when the function is passed to a memoised child component or used as a dependency of another hook. For a plain onClick on a DOM element it adds cost with no benefit.