Suggest an edit

Improve this article

Refine the answer for “What is observable in MobX?”. 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)

## Simple definition

> **Observable** is an *observed value*: an ordinary variable, object, or array wrapped in a change-tracking mechanism.
>
> When an observable value changes, MobX **automatically notifies every computation and component** that uses it.

---

## Analogy

Think of **observable** as a "reactive cell" in Excel:
if a formula (`=A1 + A2`) depends on cells A1 and A2, then when their values change, Excel recalculates the formula itself.
MobX does the same thing with data and the UI.

---

## Example 1 - a basic observable

```javascript
import { makeObservable, observable, action } from 'mobx'

class Counter {
  count = 0

constructor() {
    makeObservable(this, {
      count: observable, // an observable property
      increment: action,
    })
  }

increment() {
    this.count++
  }
}

const counter = new Counter()
```

Now `counter.count` is **observable**.
Any code (or component) that reads it **automatically becomes dependent** on it.

---

## Example 2 - automatic tracking (observer)

```javascript
import { observer } from 'mobx-react-lite'

const counter = new Counter()

const CounterView = observer(() => (
  <div>
    <p>{counter.count}</p>  {/* just reading the observable */}
    <button onClick={() => counter.increment()}>+</button>
  </div>
))
```

When `counter.count` changes, MobX:

1. detects that the `CounterView` component read `count`,
2. "remembers" that dependency,
3. re-renders only that component on the next change.

No `useState`, `useEffect`, `subscribe` - everything is "magically" reactive.

---

## How it works under the hood

MobX creates a **proxy wrapper** around the value and tracks:

- who reads the value (`get`);
- who changes it (`set`).

When the observable is read, MobX **records the active reaction** (for example, a component).
When the value updates, MobX notifies only the reactions that used it.

This mechanism is called **fine-grained reactivity**.

---

## Example 3 - an object and arrays

```javascript
import { observable } from 'mobx'

const state = observable({
  user: { name: 'Tim' },
  todos: [],
})

// automatic tracking
state.user.name = 'Alex'
state.todos.push({ text: 'learn MobX', done: false })
```

All nested fields inside `observable()` also become observable - MobX makes them reactive "recursively".

---

## makeAutoObservable - the modern approach

Today `makeAutoObservable()` is used more often - it decides itself which fields should be `observable`, which `computed`, and which `action`:

```javascript
import { makeAutoObservable } from 'mobx'

class TodoStore {
  todos = []

constructor() {
    makeAutoObservable(this) // everything automatically becomes reactive
  }

get completedCount() {
    return this.todos.filter(t => t.done).length
  }

addTodo(text) {
    this.todos.push({ text, done: false })
  }
}
```

MobX itself creates:

- `todos` - **observable** (observable data);
- `completedCount` - **computed** (a reactive derived value);
- `addTodo()` - **action** (a controlled state change).

---

## Types of observable in MobX

| Type | What it does |
|---|---|
| `observable.box(value)` | a single observable value (a primitive) |
| `observable.object(obj)` | makes an object reactive |
| `observable.map()` | a reactive Map |
| `observable.array()` | a reactive array |
| `makeAutoObservable(this)` | automatically turns class properties into observables |

---

## Summary

> **Observable** in MobX is "living" data that MobX watches.
> When it changes, everything that depends on it (components, computations, effects) updates automatically.

---

## In short

| Term | Role |
|---|---|
| **observable** | reactive state (data) |
| **computed** | derived values (depend on observables) |
| **action** | functions that change observables |
| **observer** | a wrapper component that automatically reacts to changes |

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.