Suggest an edit

Improve this article

Refine the answer for “Effects and reactivity”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 1. In short: what is an effect

**Effect (reactive effect)** is **a function that must automatically run every time the data it depends on changes.**

In other words, `effect()` is a "reactive observer".
It *remembers* which data it uses and *reruns* when that data changes.

---

## 2. A real-life example

```javascript
import { reactive, effect } from 'vue'

const state = reactive({ count: 0 })

effect(() => {
  console.log(`Count: ${state.count}`)
})

state.count++ // "Count: 1" - the effect ran again
```

### What happens here:

1. On the first call to `effect()`, Vue runs the passed function.
2. When `state.count` is read inside the function,
Vue "tracks" the dependency (through `track()`).
3. When `state.count` changes, `trigger()` is called → Vue "knows"
that it needs to rerun this `effect`.

That's why **effect = a function that automatically reacts to data changes**.

---

## 3. How it works under the hood

At the core of reactivity are two functions: `track()` and `trigger()`.

```javascript
// Simplified model
let activeEffect = null
const targetMap = new WeakMap()

function effect(fn) {
  activeEffect = fn
  fn()                 // run and track dependencies
  activeEffect = null
}

function track(target, key) {
  if (!activeEffect) return
  let depsMap = targetMap.get(target)
  if (!depsMap) targetMap.set(target, (depsMap = new Map()))
  let dep = depsMap.get(key)
  if (!dep) depsMap.set(key, (dep = new Set()))
  dep.add(activeEffect) // store the dependency
}

function trigger(target, key) {
  const depsMap = targetMap.get(target)
  if (!depsMap) return
  const effects = depsMap.get(key)
  effects && effects.forEach(fn => fn()) // run the effects
}
```

The logic is simple:

- `effect(fn)` → runs the function and remembers which properties it reads.
- `track()` → stores the dependency between a property and an effect.
- `trigger()` → when a property changes, calls all effects that depend on it.

---

## 4. Effects come in different types

Vue has **different kinds of effects**, but all of them are based on the same system:

| Effect type | What it does | Example |
|---|---|---|
| **Render effect** | Updates the component if the data used in the template changed | `{{ count }}` |
| **Watch effect** | Performs side effects when data changes | `watchEffect(() => console.log(state.count))` |
| **Computed effect** | Caches the computation result, automatically recomputed when dependencies change | `const double = computed(() => count.value * 2)` |

All these mechanisms (render, watch, computed) are just **different "layers" on top of effect()**.

---

## 5. Effect and the active context

When `effect(fn)` runs:

- Vue stores a reference to the current active effect (`activeEffect`).
- All reactive `get` operations inside `fn` get linked to this effect.
- After execution finishes, `activeEffect` is reset.

This is how Vue knows **exactly who** uses the data,
and who needs to be notified when it changes.

---

## 6. How effects are tied to components

Every component in Vue has its own **render effect** -
a function responsible for creating/updating the virtual DOM.

```javascript
effect(() => {
  renderComponent(instance)
})
```

When the data the template depends on changes,
Vue calls exactly this `effect` - and the component re-renders.
No other components are affected.

---

## 7. Why this is efficient

Effects give Vue **precise update granularity**:

- Vue knows exactly which data was used.
- Vue knows exactly which effects depend on that data.
- Vue runs only the necessary effects.

This makes the system:

- Fast
- Predictable
- Scalable

---

## 8. Short and simple

> **Effect** is a function that Vue automatically calls
> whenever any reactive data it uses changes.

---

## 9. Analogy

Think of `effect()` as **a formula in Excel**:

```javascript
= A1 + B1
```

If `A1` or `B1` changes,
the spreadsheet automatically recalculates the formula.
You don't tell it "recalculate" - it knows the dependencies.

`effect()` in Vue is that same formula, just in code.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts638 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.