Handling Race Conditions in watchEffect

Snippet

Handling Race Conditions in watchEffect

When performing asynchronous operations inside a watcher, a race condition occurs if a new effect starts before the previous one finishes. Using the onCleanup callback allows you to invalidate previous pending requests or local state variables.

snippet.js
javascript
import { watchEffect, ref } from 'vue';
 
const id = ref(1);
 
watchEffect(async (onCleanup) => {
  let active = true;
  onCleanup(() => active = false);
 
  const data = await fetch(`https://api.example.com/item/${id.value}`);
  if (active) {
    console.log('Update UI with:', data);
  }
});

vue

Breakdown

watchEffect(async (onCleanup) => { ... });

Accepts an onCleanup callback that runs whenever the effect re-triggers.

onCleanup(() => active = false);

Registers a cleanup function to flag the current execution as stale.

if (active) { ... }

Ensures that the UI is only updated if this specific async call is still relevant.

Previous snippet Next snippet

More Expert JavaScript exercises →

From your library

Handling Race Conditions in watchEffect

Related