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

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

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

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

Контент

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

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

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

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

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

## Що таке MobX

> **MobX** - це бібліотека для **управління станом** на основі **реактивності (observable data)**.
> Вона робить дані **"живими"**: якщо ти змінюєш observable-значення,
> всі місця, які використовують це значення, **автоматично оновлюються**.

Іншими словами:

> **MobX** перетворює стан застосунку на **реактивну систему**,
> де компоненти самі оновлюються при зміні залежних даних,
> без ручних `setState()` і `useEffect()`.

---

## 1. Ключова ідея MobX

MobX працює за принципом:

> **"Make your state observable and your UI will react automatically."**
> (Зроби стан спостережуваним - і UI сам на нього відреагує.)

---

## 2. Приклад базового використання

```javascript
import { makeAutoObservable } from "mobx"
import { observer } from "mobx-react-lite"

// 1. створюємо сховище
class CounterStore {
  count = 0

constructor() {
    makeAutoObservable(this) // робить усі поля "реактивними"
  }

increment() {
    this.count++
  }
}

const counter = new CounterStore()

// 2. компонент-обгортка
const Counter = observer(() => (
  <div>
    <p>Лічильник: {counter.count}</p>
    <button onClick={() => counter.increment()}>+</button>
  </div>
))
```

Що тут відбувається:

- `makeAutoObservable()` робить `count` **observable**,
а `increment()` - **action**.
- `observer()` обгортає компонент -> тепер він **автоматично оновиться**,
коли зміниться `counter.count`.

---

## 3. Основні поняття MobX

| Поняття | Що робить |
|---|---|
| **Observable** | Спостережувані дані (змінні, об'єкти, масиви) |
| **Observer** | Компонент, який "стежить" за observable |
| **Action** | Метод, що змінює стан |
| **Computed** | Похідне значення, перераховується при змінах |
| **Reaction** | Автоматична реакція на зміну даних |

---

### Приклад з `computed`:

```javascript
class TodoStore {
  todos = []

constructor() {
    makeAutoObservable(this)
  }

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

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

const todoStore = new TodoStore()
```

`completedCount` - це **обчислювана властивість**,
яка перерахується автоматично при зміні `todos`.

---

## 4. Яку задачу вирішує MobX

MobX вирішує класичну проблему React-застосунків:

> «Як синхронізувати стан і UI, щоб усе оновлювалося автоматично,
> без ручних `setState`, `useEffect` і зайвого коду?»

Тобто:

- спрощує управління станом;
- усуває "шум" з коду (жодних `dispatch`, `reducers`, `actions`);
- позбавляє необхідності вручну відстежувати залежності;
- мінімізує зайві ререндери (оновлюються тільки зачеплені компоненти).

---

## 5. Чому MobX називають "реактивним"

MobX створює **граф залежностей** між даними і компонентами.
Якщо змінюється значення `count`, MobX **точно знає**, які компоненти його використовують,
і **оновлює тільки їх** - як в Excel перераховуються тільки клітинки, залежні від зміненої.

---

## 6. MobX vs Redux (для розуміння контексту)

|  | **MobX** | **Redux / Toolkit** |
|---|---|---|
| Підхід | Реактивний | Імперативний |
| Зміна стану | Напряму (`store.count++`) | Через `dispatch({ type, payload })` |
| Boilerplate | Мінімальний | Більше коду |
| Продуктивність | Дуже висока (fine-grained updates) | Залежить від оптимізації |
| Логіка | Клас/об'єкт з методами | Reducers і actions |
| Типовий сценарій | UI з частими змінами | Застосунки з жорстким потоком даних |

MobX простіший і швидший для "живих інтерфейсів" (дашборди, редактори, фільтри).
Redux краще для масштабних застосунків з жорстким контролем логіки.

---

## 7. Типові сценарії, де MobX особливо зручний

- Форми і фільтри з миттєвою реакцією на введення
- Дашборди і візуалізації (динамічні дані, графіки)
- Дрібні незалежні компоненти, залежні від локальних станів
- Налаштування, прапорці, UI-state (sidebar відкритий, тема, модалки тощо)

---

## 8. Переваги MobX

Простота - мінімум коду
Реактивність з коробки
Автоматичне відстеження залежностей
Відмінна продуктивність
Прозора робота з TypeScript
Чудово поєднується з React, Vue, Solid та ін.

---

## 9. Недоліки / коли не підходить

Менше контролю над потоком даних (порівняно з Redux або Effector)
Реактивність "магічна" - може бути складніше налагоджувати
Не ідеально підходить для детермінованого стану (наприклад, при складній бізнес-логіці, де потрібне чітке "action -> state -> view")

---

## ПІДСУМОК

> **MobX** - це реактивний менеджер стану для React.
> Він робить стан **observable**,
> компоненти - **observer**,
> і забезпечує **автоматичну синхронізацію даних і UI**
> без ручного управління оновленнями.

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

Для рев’юера

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

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