2. MobX

MobX — это библиотека, которая делает управление состоянием простым и масштабируемым путем применения функционального реактивного программирования (TFRP).

Основная концепция

В отличие от Redux или Zustand, MobX не требует неизменяемости (immutability). Вы просто изменяете свойства объектов, а MobX автоматически обновляет только те части интерфейса, которые зависят от этих свойств.

graph LR
    Action[Action] --> Observable[Observable State]
    Observable --> Computed[Computed Values]
    Observable --> Reaction[Side Effects / UI]

Три столпа MobX

1. State (Состояние): Любые структуры данных (объекты, массивы, классы), помеченные как makeAutoObservable.
2. Actions (Действия): Функции, которые изменяют состояние.
3. Derivations (Производные): Все, что может быть вычислено автоматически (Computed values) или обновлено (UI).

Пример на классах

import { makeAutoObservable } from "mobx";

class CounterStore {
  count = 0;

  constructor() {
    makeAutoObservable(this);
  }

  increment() {
    this.count++;
  }
}

const store = new CounterStore();

Плюсы и минусы

Плюсы:

• Минимум шаблонного кода.
• Высокая производительность “из коробки” (автоматическая оптимизация рендеров).
• Привычный объектно-ориентированный подход.

Минусы:

• Слишком много “магии” под капотом.
• Сложность отладки в очень больших приложениях из-за мутаций.
• Несовместимость с некоторыми концепциями Concurrent Mode в React.

---

Интерактивный пример