What is the useCallback hook?

Answer

useCallback returns a memoized version of a callback function — the same function reference is returned on subsequent renders unless the dependencies change. Syntax: const memoizedFn = useCallback(() => doSomething(a, b), [a, b]);. Why it matters: in JavaScript, every function defined inside a component is a new function reference on every render. When you pass a callback to a child component, the child receives a new reference each time, causing it to re-render even if nothing meaningful changed. With useCallback, the function reference stays stable as long as dependencies do not change — preventing unnecessary child re-renders when combined with React.memo. Key relationship: useCallback(fn, deps) is equivalent to useMemo(() => fn, deps). When to use: (1) Passing callbacks to memoized child components (React.memo). (2) Dependencies in useEffect that should not re-run just because a function was recreated. (3) Event handlers passed to frequently re-rendering children. Overusing useCallback is a performance anti-pattern — it adds overhead and memory usage.