Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «makeObservable і makeObservable». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## Що робить `makeObservable()`

> `makeObservable(this, annotations)` -
> **робить властивості й методи екземпляра класу спостережуваними (observable)**,
> відповідно до вказаних анотацій.

Ти **вручну вказуєш**, які поля і методи стають:

- `observable` - відстежуються на зміну,
- `computed` - обчислюються на основі інших observable,
- `action` - змінюють стан.

---

### Приклад з `makeObservable`

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

class Counter {
  count = 0

constructor() {
    // вручну оголошуємо, що спостерігати
    makeObservable(this, {
      count: observable,
      increment: action,
      double: computed,
    })
  }

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

increment() {
    this.count++
  }
}

const counter = new Counter()
```

Тепер:

- `count` - відстежуване значення,
- `increment()` - "дія" (action),
- `double` - обчислювана властивість (computed).

Компоненти, обгорнуті в `observer`,
будуть **автоматично перерендерюватися**, якщо `count` зміниться.

---

### Ключові моменти:

- `makeObservable()` - **явний** опис реактивних властивостей.
- Потрібно **вказувати анотації вручну**.
- Підходить, якщо тобі потрібне **точне налаштування** (наприклад, не всі поля observable).
- Працює і зі спадкуванням (можна комбінувати анотації з різних класів).

---

## Що робить `makeAutoObservable()`

> `makeAutoObservable(this)` -
> автоматично робить **усі властивості й методи класу реактивними**,
> без явного переліку анотацій.

Тобто MobX **сам визначає**, що є:

- `observable` (поля),
- `computed` (геттери),
- `action` (методи).

---

### Приклад з `makeAutoObservable`

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

class Counter {
  count = 0

constructor() {
    makeAutoObservable(this) // все робиться автоматично
  }

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

increment() {
    this.count++
  }
}

const counter = new Counter()
```

Тут MobX сам:

- зробив `count` → `observable`,
- `double` → `computed`,
- `increment()` → `action`.

---

### Чому "auto"

MobX аналізує структуру класу:

- поля → `observable`,
- геттери → `computed`,
- методи → `action`.

Тобі не потрібно нічого вказувати вручну.
Це **найзручніший спосіб створювати store** для більшості сценаріїв.

---

## Різниця між `makeObservable` і `makeAutoObservable`

| Властивість | `makeObservable` | `makeAutoObservable` |
|---|---|---|
| Анотації | Вказуються вручну | Визначаються автоматично |
| Контроль | Повний (гнучкість) | Спрощений (зручність) |
| Підходить для | Складних і кастомних структур | Простих store і UI-state |
| Computed | Потрібно оголосити вручну | Визначається за геттерами |
| Actions | Вказуються вручну | Автоматично позначаються |
| Використовується частіше | У великих проєктах з контролем типів | У більшості випадків (UI / SPA) |

---

## Приклад різниці

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

constructor() {
    // makeObservable вимагає явного опису
    makeObservable(this, {
      name: observable,
      age: observable,
      isAdult: computed,
      birthday: action,
    })
  }

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

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

Те саме з `makeAutoObservable`:

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

constructor() {
    makeAutoObservable(this)
  }

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

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

Обидва варіанти працюють однаково,
але другий - **коротший, чистіший і простіший**.

---

## Коли використовувати який

| Сценарій | Що вибрати |
|---|---|
| 90% випадків - стандартні store | `makeAutoObservable` |
| Потрібно виключити поле зі спостереження | `makeObservable` (явний контроль) |
| Є поля, що не потребують реактивності (наприклад, `timeoutId`, `config`) | `makeObservable` |
| Складне спадкування store-класів | `makeObservable` |
| Швидко створити store для UI | `makeAutoObservable` |

---

## Можна комбінувати

Ти можеш використовувати `makeAutoObservable`,
але все ж **вказати, що не потрібно відстежувати**:

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

constructor() {
    makeAutoObservable(this, {
      id: false, // не відстежувати цю властивість
    })
  }

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

---

## ПІДСУМОК

> `makeObservable(this, annotations)` - ручне налаштування реактивних властивостей.
> `makeAutoObservable(this)` - автоматична реактивність "із коробки".

| Функція | Що робить |
|---|---|
| `makeObservable` | вручну оголошує observable, computed та action |
| `makeAutoObservable` | автоматично робить усе спостережуваним |

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати628 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.