mobx

Simple, scalable state management.

weekly downloads2.7M

versionv6.15.0

licenseMIT

categorystate

mobxmobservableobservablereact-componentreactreactjsreactivemodelfrpfunctional-reactive-programmingstate managementdata flow

Overview

MobX is a battle-tested state management library that applies reactive programming principles to keep your UI automatically synchronized with application state. Instead of manually tracking dependencies and triggering updates, MobX treats your application like a spreadsheet where changes to observable data automatically propagate through computed values and trigger relevant reactions. This eliminates an entire class of bugs related to stale or inconsistent state.

The library's core philosophy centers on making state management transparent and automatic. You mark data structures as observable, define actions to modify them, and wrap components with an observer decorator. MobX handles the rest—tracking which parts of your UI depend on which state, and updating only what's necessary when data changes. Unlike Redux's immutable patterns and reducer boilerplate, MobX allows direct state mutations while maintaining full reactivity.

With over 2.7 million weekly downloads, MobX powers applications at companies ranging from startups to enterprises. It's particularly valuable in complex applications with intricate state dependencies, where manually managing update propagation would be error-prone. The library works with any JavaScript framework but is most commonly paired with React, where it serves as a lightweight alternative to Redux or Context API patterns.

MobX 6 introduced improved TypeScript support, removed decorator requirement (making it more accessible), and reduced bundle size. The library remains framework-agnostic at its core, with bindings available for React, Vue, Angular, and vanilla JavaScript applications.

Quick Start

typescript

import { makeObservable, observable, action, computed } from 'mobx';
import { observer } from 'mobx-react-lite';
import React from 'react';

class TodoStore {
  todos = [];
  filter = 'all';

  constructor() {
    makeObservable(this, {
      todos: observable,
      filter: observable,
      addTodo: action,
      toggleTodo: action,
      setFilter: action,
      filteredTodos: computed,
      completedCount: computed
    });
  }

  addTodo(text) {
    this.todos.push({ id: Date.now(), text, completed: false });
  }

  toggleTodo(id) {
    const todo = this.todos.find(t => t.id === id);
    if (todo) todo.completed = !todo.completed;
  }

  setFilter(filter) {
    this.filter = filter;
  }

  get filteredTodos() {
    switch (this.filter) {
      case 'completed': return this.todos.filter(t => t.completed);
      case 'active': return this.todos.filter(t => !t.completed);
      default: return this.todos;
    }
  }

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

const store = new TodoStore();

const TodoApp = observer(() => (
  <div>
    <input
      onKeyPress={e => {
        if (e.key === 'Enter' && e.target.value) {
          store.addTodo(e.target.value);
          e.target.value = '';
        }
      }}
      placeholder="Add todo..."
    />
    <div>
      {['all', 'active', 'completed'].map(f => (
        <button key={f} onClick={() => store.setFilter(f)}>
          {f}
        </button>
      ))}
    </div>
    <ul>
      {store.filteredTodos.map(todo => (
        <li key={todo.id} onClick={() => store.toggleTodo(todo.id)}>
          <span style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
            {todo.text}
          </span>
        </li>
      ))}
    </ul>
    <p>Completed: {store.completedCount}/{store.todos.length}</p>
  </div>
));

export default TodoApp;

Use Cases

Complex form management: Applications with interdependent form fields where changing one value affects validation, visibility, or calculations in others. MobX automatically recomputes derived values and updates relevant UI sections without manual coordination.

Real-time dashboards: Financial trading platforms, monitoring tools, or analytics dashboards where incoming data updates need to cascade through calculations, filters, and visualizations. MobX's reactive system ensures all dependent computed values update automatically and efficiently.

E-commerce shopping carts: Managing cart state, inventory availability, pricing calculations, discount rules, and shipping estimates. When a user changes quantity, MobX propagates updates through all affected computations (subtotals, taxes, shipping) without explicit imperative logic.

Collaborative applications: Document editors, project management tools, or design applications where multiple data models interact. Changes to one entity (like moving a task between columns) can trigger updates to sprint calculations, team capacity metrics, and timeline visualizations automatically.

Game state management: Turn-based or simulation games where game state changes trigger complex cascading effects. MobX handles the reactive propagation of state changes through game rules, UI updates, and AI responses without manual orchestration.

Pros & Cons

Pros

+Minimal boilerplate compared to Redux—no action creators, reducers, or dispatch patterns required
+Fine-grained reactivity only updates components actually affected by state changes, improving performance
+Intuitive mental model where state mutations work like normal JavaScript, making it easier to learn and debug
+Excellent TypeScript support with strong type inference for observables, actions, and computed values
+Framework-agnostic core works with React, Vue, Angular, or vanilla JS without lock-in

Cons

−Less explicit data flow can make debugging harder in large applications—changes propagate automatically without clear traces
−Smaller ecosystem and community compared to Redux, meaning fewer middleware options and third-party integrations
−Time-travel debugging and state persistence require additional setup, unlike Redux DevTools which offers this out-of-the-box
−Easier to create accidental side effects or circular dependencies since mutations are allowed anywhere
−Learning curve for understanding observability rules, reactive boundaries, and when computations trigger can trip up beginners

Alternatives

recoilv0.7.7

Recoil - A state management library for React

state

412K / week

reduxv5.0.1

Predictable state container for JavaScript apps

statereduxreducer

20.8M / week

zustandv5.0.11

🐻 Bear necessities for state management in React

statereactstate

20.2M / week

Comparisons

mobx vs @reduxjs/toolkit

state

Install

bash

npm install mobx

bash

pnpm add mobx

bash

bun add mobx

Overview

Quick Start

typescript

import { makeObservable, observable, action, computed } from 'mobx';
import { observer } from 'mobx-react-lite';
import React from 'react';

class TodoStore {
  todos = [];
  filter = 'all';

  constructor() {
    makeObservable(this, {
      todos: observable,
      filter: observable,
      addTodo: action,
      toggleTodo: action,
      setFilter: action,
      filteredTodos: computed,
      completedCount: computed
    });
  }

  addTodo(text) {
    this.todos.push({ id: Date.now(), text, completed: false });
  }

  toggleTodo(id) {
    const todo = this.todos.find(t => t.id === id);
    if (todo) todo.completed = !todo.completed;
  }

  setFilter(filter) {
    this.filter = filter;
  }

  get filteredTodos() {
    switch (this.filter) {
      case 'completed': return this.todos.filter(t => t.completed);
      case 'active': return this.todos.filter(t => !t.completed);
      default: return this.todos;
    }
  }

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

const store = new TodoStore();

const TodoApp = observer(() => (
  <div>
    <input
      onKeyPress={e => {
        if (e.key === 'Enter' && e.target.value) {
          store.addTodo(e.target.value);
          e.target.value = '';
        }
      }}
      placeholder="Add todo..."
    />
    <div>
      {['all', 'active', 'completed'].map(f => (
        <button key={f} onClick={() => store.setFilter(f)}>
          {f}
        </button>
      ))}
    </div>
    <ul>
      {store.filteredTodos.map(todo => (
        <li key={todo.id} onClick={() => store.toggleTodo(todo.id)}>
          <span style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
            {todo.text}
          </span>
        </li>
      ))}
    </ul>
    <p>Completed: {store.completedCount}/{store.todos.length}</p>
  </div>
));

export default TodoApp;

Use Cases

Pros & Cons

Pros

+Minimal boilerplate compared to Redux—no action creators, reducers, or dispatch patterns required
+Fine-grained reactivity only updates components actually affected by state changes, improving performance
+Intuitive mental model where state mutations work like normal JavaScript, making it easier to learn and debug
+Excellent TypeScript support with strong type inference for observables, actions, and computed values
+Framework-agnostic core works with React, Vue, Angular, or vanilla JS without lock-in

Cons

−Less explicit data flow can make debugging harder in large applications—changes propagate automatically without clear traces
−Smaller ecosystem and community compared to Redux, meaning fewer middleware options and third-party integrations
−Time-travel debugging and state persistence require additional setup, unlike Redux DevTools which offers this out-of-the-box
−Easier to create accidental side effects or circular dependencies since mutations are allowed anywhere
−Learning curve for understanding observability rules, reactive boundaries, and when computations trigger can trip up beginners