Suggest an edit

Improve this article

Refine the answer for “What is MobX?”. 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 MobX is

> **MobX** is a library for **state management** built on **reactivity (observable data)**.
> It makes data **"alive"**: if you change an observable value,
> every place using that value **updates automatically**.

In other words:

> **MobX** turns application state into a **reactive system**,
> where components update themselves when the data they depend on changes,
> without manual `setState()` and `useEffect()`.

---

## 1. The key idea of MobX

MobX works on the principle:

> **"Make your state observable and your UI will react automatically."**

---

## 2. Basic usage example

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

// 1. create a store
class CounterStore {
  count = 0

constructor() {
    makeAutoObservable(this) // makes every field "reactive"
  }

increment() {
    this.count++
  }
}

const counter = new CounterStore()

// 2. wrapper component
const Counter = observer(() => (
  <div>
    <p>Count: {counter.count}</p>
    <button onClick={() => counter.increment()}>+</button>
  </div>
))
```

What happens here:

- `makeAutoObservable()` makes `count` **observable**,
and `increment()` an **action**.
- `observer()` wraps the component, so now it **automatically updates**
when `counter.count` changes.

---

## 3. Core MobX concepts

| Concept | What it does |
|---|---|
| **Observable** | Observed data (variables, objects, arrays) |
| **Observer** | A component that "watches" an observable |
| **Action** | A method that changes state |
| **Computed** | A derived value, recalculated on changes |
| **Reaction** | An automatic reaction to a data change |

---

### Example with `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` is a **computed property**
that recalculates automatically when `todos` changes.

---

## 4. What problem MobX solves

MobX solves a classic React application problem:

> "How do you keep state and UI in sync so everything updates automatically,
> without manual `setState`, `useEffect`, and extra code?"

That is, it:

- simplifies state management;
- removes "noise" from the code (no `dispatch`, `reducers`, `actions`);
- removes the need to manually track dependencies;
- minimizes unnecessary re-renders (only the affected components update).

---

## 5. Why MobX is called "reactive"

MobX builds a **dependency graph** between data and components.
If the value of `count` changes, MobX **knows exactly** which components use it
and **updates only those** - like in Excel, where only the cells depending on the changed one are recalculated.

---

## 6. MobX vs Redux (for context)

|  | **MobX** | **Redux / Toolkit** |
|---|---|---|
| Approach | Reactive | Imperative |
| State change | Directly (`store.count++`) | Via `dispatch({ type, payload })` |
| Boilerplate | Minimal | More code |
| Performance | Very high (fine-grained updates) | Depends on optimization |
| Logic | A class/object with methods | Reducers and actions |
| Typical scenario | UI with frequent changes | Applications with strict data flow |

MobX is simpler and faster for "live interfaces" (dashboards, editors, filters).
Redux is better for large-scale applications with strict logic control.

---

## 7. Typical scenarios where MobX is especially convenient

- Forms and filters with an instant reaction to input
- Dashboards and visualizations (dynamic data, charts)
- Small independent components that depend on local state
- Settings, flags, UI state (sidebar open, theme, modals, etc.)

---

## 8. Advantages of MobX

Simplicity, minimal code
Reactivity out of the box
Automatic dependency tracking
Excellent performance
Transparent TypeScript support
Combines well with React, Vue, Solid, and others

---

## 9. Drawbacks / when it doesn't fit

Less control over data flow (compared to Redux or Effector)
The reactivity is "magic", which can be harder to debug
Not ideally suited for deterministic state (for example, with complex business logic that needs a clear "action -> state -> view")

---

## SUMMARY

> **MobX** is a reactive state manager for React.
> It makes state **observable**,
> components **observers**,
> and provides **automatic synchronization of data and UI**
> without manually managing updates.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.