Що таке MobX?

ReactJunior~2 хв читання

Що таке 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 без ручного управління оновленнями.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.