Watcher Without Cleanup (ARCH3322)

Key typescript.vue.watcher-cleanup · Severity warning · Category performance

Vue: flags watch/watchEffect that starts a timer, listener or subscription without a cleanup callback or onScopeDispose, so it outlives the component.

Incorrect

watch(roomId, id => {
  socket.subscribe(id, onMessage);
});

Correct

watch(roomId, (id, _, onCleanup) => {
  socket.subscribe(id, onMessage);
  onCleanup(() => socket.unsubscribe(id, onMessage));
});