Topic
Definition
useCallback is a React Hook that caches a function definition between re-renders and returns the same function reference until its listed dependencies change.
In simpler words
useCallback(fn, deps) is like useMemo(() => fn, deps) for functions — keep the same function identity when children or Effects care about it.
Stable callbacks, memoized children, Effect dependencies, and avoiding needless wrapping.
Stable callbacks, memoized children, Effect dependencies, and avoiding needless wrapping.
Start by identifying which value or browser behavior changes. Then describe the UI from that current input instead of editing the DOM as a separate source of truth.
const onSelect = useCallback((id: string) => {
setSelectedId(id);
}, []);
useEffect(() => {
document.title = selectedId ?? "Tickets";
}, [selectedId]);Read the example from data and control flow to the resulting UI. Keep the component boundary small.
Keep rendering as a calculation. Put user-triggered changes in event handlers, preserve UI memory in state, and reserve external synchronization for Effects or the server-state layer.
Name values by their UI meaning, test the loading and error path when data is remote, and avoid keeping two editable copies of the same value.
Ask before adding code: is this local UI memory, shared client state, or Nest-owned server state?
Definition
High-bug areas are places where a small API misuse looks correct but produces stale UI, duplicate work, or silent failures.
In simpler words
Each mistake below shows Wrong vs Right code — compare them side by side.
When something misbehaves, match the symptom to a pattern below before rewriting the feature.
Prefer fixing the ownership or update path over adding another Effect or sync step.
// Wrong
const onClick = useCallback(() => setOpen(true), []);
<button onClick={onClick}>Open</button>
// Right
<button onClick={() => setOpen(true)}>Open</button>Most event handlers do not need a stable identity. Add useCallback when a child or Effect depends on reference equality.
// Wrong
const save = useCallback(() => {
api.create(draft);
}, []); // draft stale
// Right
const save = useCallback(() => {
api.create(draft);
}, [draft]);
// or read draft from a ref / submit handler that already has the latest valueStale closures are the same class of bug as Effect dependency mistakes.
// Wrong
const load = useCallback(() => list(status), [status]);
useEffect(() => { load(); }, [load]);
// Right
useEffect(() => { list(status); }, [status]);
// better for Nest lists: useQuery({ queryKey: ["t", status], queryFn: list })Prefer fewer Effects and Query keys over stacking memo wrappers around fetch helpers.
Live playground
Change one input at a time and predict the next render.
Effects depend on the handler. A new function each render re-fires the Effect; useCallback keeps identity until deps change.
status=open · renders=1 · Effect with plain fn runs=0 · Effect with useCallback runs=0
const onChange = useCallback(() => { ... }, [status]);
useEffect(() => { /* subscribe */ }, [onChange]);Test
At least 10 questions — mix of concept, syntax, practical, and logic. Score ≥ 80% (enforced by the API) to save progress.
Checking your session…
12 questions · concept 3 · syntax 3 · practical 3 · logic 3