Features
- Transparent reactive programming — just mutate state
- Automatic dependency tracking and re-rendering
- Class-based and function-based store patterns
- Computed values derived automatically from state
- Framework-agnostic core with React bindings
Pros
- Most intuitive mental model — mutate objects, UI updates
- Zero boilerplate compared to Redux-style patterns
- Excellent performance through fine-grained reactivity
Cons
- Magic can make data flow harder to trace in large apps
- Proxy-based reactivity has edge cases with destructuring
- Less ecosystem momentum compared to newer alternatives
Overview
MobX is a state management library that makes state management simple by applying transparent functional reactive programming. The core idea: make state observable, and anything that derives from or reacts to that state updates automatically. You mutate state directly — no actions, reducers, or dispatchers required — and MobX tracks dependencies and updates the right components.
MobX uses proxies to intercept reads and writes to your state objects, building a dependency graph automatically. Computed values are derived lazily and cached until their dependencies change. React components wrapped with observer re-render only when the specific observable values they access change, providing fine-grained reactivity without manual optimization.
When to Use
MobX is the right choice when you want the simplest possible state management with direct mutation, when your team prefers object-oriented patterns, or when you need fine-grained reactivity without the boilerplate of flux-style architectures.
Getting Started
npm install mobx mobx-react-liteimport { makeAutoObservable } from "mobx";
import { observer } from "mobx-react-lite";
class CounterStore {
count = 0;
constructor() { makeAutoObservable(this); }
increment() { this.count++; }
}
const store = new CounterStore();
const Counter = observer(() => (
<button onClick={() => store.increment()}>Count: {store.count}</button>
));