Problem Statement
How do you stop a watcher and perform cleanup work?
Explanation
Both watch and watchEffect return a stop function you can call to remove the effect. For in-effect cleanup (like aborting a fetch or removing event listeners), accept the onInvalidate callback and register a cleanup function.
Code Solution
SolutionRead Only
const stop = watchEffect((onInvalidate) => {
const ctrl = new AbortController()
fetch('/api', { signal: ctrl.signal })
onInvalidate(() => ctrl.abort())
})
// later
stop()