intermediate
useCallback
Stabilize callback identity for memoized children and effect dependencies without hiding stale values.
`useCallback` returns a memoized function reference when dependencies are unchanged. It helps when a memoized child compares props by reference or when an effect lists a function in its dependency array.
It does not freeze closed-over values — stale closures remain possible if dependencies are incomplete. Wrapping every inline handler adds bookkeeping without benefit unless something downstream needs stable identity. Often extracting a child or accepting rerenders is simpler.
const onSelect = useCallback((id) => {
setSelected(id);
}, []);
On interviews, explain the concept with a concrete example and name the behavior interviewers probe.
Common pitfalls include hiding data flow, over-splitting components, and putting side effects in render.
The trade-off is often clarity versus reuse or explicit props versus convenience.
Checklist:
- Stabilize callbacks for memoized children or effect deps.
- Include values the callback reads in dependencies.
- Do not blanket-wrap all handlers.