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.