Hint
useCallback returns the same function reference only when deps don't change. This is what makes React.memo work — it prevents child re-renders when the callback reference is stable.
function useCallback(fn, deps) {
let saved = { fn: null, deps: null };
return function get(newDeps) {
const same = saved.deps && newDeps.every((d, i) => d === saved.deps[i]);
if (!same) { saved = { fn, deps: newDeps }; }
return saved.fn;
};
}
const handler = (id) => console.log('clicked', id);
const getHandler = useCallback(handler, []);
const ref1 = getHandler([1]);
const ref2 = getHandler([1]);
const ref3 = getHandler([2]);
console.log(ref1 === ref2);
console.log(ref2 === ref3);true false
Explanation: ref1 and ref2 use the same deps [1]===same, so same fn reference returned. ref3 has different deps [2], triggering a new save — different reference.
Key Insight: useCallback returns the same function reference only when deps don't change. This is what makes React.memo work — it prevents child re-renders when the callback reference is stable.