Lesson 18 — Watchers with cleanup

Cancel the previous run

A watcher callback gets a third argument, onCleanup. Whatever function you register with it runs right before the next run of the watcher (and when the component goes away). That is the place to cancel the previous timer or request, so only the latest one finishes — this is called debouncing.

watch(q, (value, old, onCleanup) => {
  const ctrl = new AbortController()
  fetch("/search?q=" + value, { signal: ctrl.signal })
  onCleanup(() => ctrl.abort())
})

Why it matters: without cleanup, fast typing fires a search per keystroke and old results can overwrite new ones.