Suggest an edit

Improve this article

Refine the answer for “makeObservable and makeObservable”. 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)

## What `makeObservable()` does

> `makeObservable(this, annotations)` -
> **makes a class instance's properties and methods observable**,
> according to the given annotations.

You **manually specify** which fields and methods become:

- `observable` - tracked for changes,
- `computed` - calculated based on other observables,
- `action` - change the state.

---

### Example with `makeObservable`

```javascript
import { makeObservable, observable, action, computed } from "mobx"

class Counter {
  count = 0

constructor() {
    // manually declare what to observe
    makeObservable(this, {
      count: observable,
      increment: action,
      double: computed,
    })
  }

get double() {
    return this.count * 2
  }

increment() {
    this.count++
  }
}

const counter = new Counter()
```

Now:

- `count` is a tracked value,
- `increment()` is an "action",
- `double` is a computed property.

Components wrapped in `observer`
will **automatically re-render** if `count` changes.

---

### Key points:

- `makeObservable()` is an **explicit** description of reactive properties.
- You need to **specify annotations manually**.
- It fits when you need **fine-grained control** (for example, not all fields are observable).
- It also works with inheritance (annotations from different classes can be combined).

---

## What `makeAutoObservable()` does

> `makeAutoObservable(this)` -
> automatically makes **all of a class's properties and methods reactive**,
> without explicitly listing annotations.

That is, MobX **determines on its own** what is:

- `observable` (fields),
- `computed` (getters),
- `action` (methods).

---

### Example with `makeAutoObservable`

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

class Counter {
  count = 0

constructor() {
    makeAutoObservable(this) // everything is done automatically
  }

get double() {
    return this.count * 2
  }

increment() {
    this.count++
  }
}

const counter = new Counter()
```

Here MobX itself:

- made `count` → `observable`,
- `double` → `computed`,
- `increment()` → `action`.

---

### Why "auto"

MobX analyzes the class structure:

- fields → `observable`,
- getters → `computed`,
- methods → `action`.

You do not need to specify anything manually.
This is the **most convenient way to create a store** for most scenarios.

---

## The difference between `makeObservable` and `makeAutoObservable`

| Property | `makeObservable` | `makeAutoObservable` |
|---|---|---|
| Annotations | Specified manually | Determined automatically |
| Control | Full (flexibility) | Simplified (convenience) |
| Fits for | Complex, custom structures | Simple stores and UI state |
| Computed | Must be declared manually | Determined from getters |
| Actions | Specified manually | Marked automatically |
| Used more often | In large projects with type control | In most cases (UI / SPA) |

---

## Example of the difference

```javascript
class UserStore {
  name = "Alex"
  age = 25

constructor() {
    // makeObservable requires an explicit description
    makeObservable(this, {
      name: observable,
      age: observable,
      isAdult: computed,
      birthday: action,
    })
  }

get isAdult() {
    return this.age >= 18
  }

birthday() {
    this.age++
  }
}
```

The same thing with `makeAutoObservable`:

```javascript
class UserStore {
  name = "Alex"
  age = 25

constructor() {
    makeAutoObservable(this)
  }

get isAdult() {
    return this.age >= 18
  }

birthday() {
    this.age++
  }
}
```

Both variants work the same way,
but the second one is **shorter, cleaner, and simpler**.

---

## When to use which

| Scenario | What to choose |
|---|---|
| 90% of cases - standard stores | `makeAutoObservable` |
| Need to exclude a field from observation | `makeObservable` (explicit control) |
| There are fields that don't need reactivity (for example, `timeoutId`, `config`) | `makeObservable` |
| Complex inheritance between store classes | `makeObservable` |
| Quickly create a store for the UI | `makeAutoObservable` |

---

## Combining them is possible

You can use `makeAutoObservable`,
but still **specify what should not be tracked**:

```javascript
class Store {
  id = Math.random()
  value = 0

constructor() {
    makeAutoObservable(this, {
      id: false, // do not track this property
    })
  }

increment() {
    this.value++
  }
}
```

---

## SUMMARY

> `makeObservable(this, annotations)` - manual setup of reactive properties.
> `makeAutoObservable(this)` - automatic reactivity "out of the box".

| Function | What it does |
|---|---|
| `makeObservable` | manually declares observable, computed, and action |
| `makeAutoObservable` | automatically makes everything observable |

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.