How to Use watchEffect in Vue: Simple Guide with Examples

In Vue, watchEffect runs a function immediately and re-runs it whenever its reactive dependencies change. It automatically tracks any reactive state used inside the function without needing to specify them explicitly.

Syntax

The watchEffect function takes a callback that runs immediately and re-runs whenever any reactive data inside it changes. It returns a stop function to stop watching.

• watchEffect(callback): Runs callback reactively.
• callback: A function that uses reactive state and performs side effects.
• Returns a stop function to stop the watcher.

javascript

import { watchEffect, ref } from 'vue';

const count = ref(0);

const stop = watchEffect(() => {
  console.log(`Count is: ${count.value}`);
});

// Later, call stop() to stop watching

Output

Count is: 0
// If count.value changes, logs updated count

Example

This example shows a Vue component using watchEffect to log the count value whenever it changes. The effect runs immediately on mount and updates on reactive changes.

vue

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import { ref, watchEffect } from 'vue';

const count = ref(0);

watchEffect(() => {
  console.log(`Count changed to: ${count.value}`);
});

function increment() {
  count.value++;
}
</script>

Output

Count: 0
// On button click, console logs: Count changed to: 1, 2, 3 ...

Common Pitfalls

Not stopping watchEffect: If you create many watchers without stopping them, it can cause memory leaks.
Using non-reactive values: watchEffect only tracks reactive sources like ref or reactive. Plain variables won't trigger updates.
Side effects inside watchEffect: Avoid heavy computations or async calls without cleanup inside watchEffect to prevent unexpected behavior.

javascript

import { watchEffect, ref } from 'vue';

const count = ref(0);

// Wrong: Using non-reactive variable inside watchEffect
let nonReactive = 5;
watchEffect(() => {
  console.log(`Non-reactive value: ${nonReactive}`); // Won't re-run on changes
});

// Right: Use reactive ref
const reactiveVal = ref(5);
watchEffect(() => {
  console.log(`Reactive value: ${reactiveVal.value}`); // Re-runs on changes
});

Output

Non-reactive value: 5
Reactive value: 5
// Only changes to reactiveVal.value trigger re-run

Quick Reference

• Purpose: Automatically run side effects when reactive dependencies change.
• Tracks: All reactive sources used inside the callback.
• Returns: A stop function to cancel watching.
• Use when: You want to react to reactive data changes without specifying dependencies manually.

Key Takeaways

watchEffect runs a function immediately and re-runs it when reactive dependencies change.

It automatically tracks reactive state used inside the callback without manual dependency listing.

Always stop watchers when no longer needed to avoid memory leaks.

watchEffect only reacts to reactive sources like ref or reactive, not plain variables.

Use watchEffect for simple reactive side effects without specifying dependencies explicitly.