mobx
MobX is a signal-based reactive state management library that makes any object observable and automatically tracks which derived computations and UI components depend on which fields, re-running only what's strictly needed. It's framework-agnostic at its core but most commonly paired with React via mobx-react/mobx-react-lite.
Embed badge
[](https://opensources.dev/resource/mobx)MITPermissive — free to use in commercial and proprietary software, with attribution.View license →
Production readiness
4/5- Actively maintainedCommits in the last 6 months
- No known vulnerabilitiesNot yet scanned
- Clear, usable licenseMIT (permissive)
- Proven adoptionWidely used
- Has documentationDocumentation indexed
npm install mobxOur analysis
MobX is a transparent functional reactive programming (TFRP) library that turns plain JavaScript objects into observable state, automatically building a runtime dependency graph so derivations and side effects update only when the exact data they read changes.
When to use mobx
Reach for MobX when you want minimal-boilerplate state management with automatic, fine-grained reactivity and don't want to hand-write selectors, memoization, or action/reducer ceremony. It fits OOP-style domain models, complex client-side state, and apps where you value decoupling state from the UI framework.
When not to
Avoid it if your team prefers explicit, traceable, immutable state flow (Redux), wants a tiny hook-first store (Zustand/Jotai), or needs an opinionated state-machine model (XState). Its 'magic' mutation tracking and Proxy-based observables can also be a poor fit for projects that prize serializable, time-travel-debuggable, pure-functional state.
Strengths
- Very low boilerplate — mutate state with normal JS assignments and reads/writes are tracked automatically
- Fine-grained, glitch-free reactivity re-renders only the components that actually depend on changed fields, eliminating manual memoization
- Framework-agnostic core that can manage state outside any UI library, improving testability and portability
- Battle-tested over many years with strong TypeScript support and React bindings
Trade-offs
- Implicit reactivity can be hard to reason about and debug compared to explicit dispatch flows
- Relies on Proxy/decorators and mutable state, which works against immutability-based tooling like time-travel debugging
- Several API evolutions (makeAutoObservable, decorators, mobx-react vs mobx-react-lite) create version confusion in docs and tutorials
- Easy to misuse the observer boundary, leading to subtle missing or excessive re-renders
Maturity
Mature and widely adopted (28k+ stars), with an established ecosystem (mobx-react, mobx-state-tree, awesome-mobx), corporate sponsorship, and long-term maintenance backed by Mendix. APIs have stabilized around MobX 6's makeAutoObservable.
title: About MobX sidebar_label: About MobX hide_title: true
MobX
Simple, scalable state management.
MobX is made possible by the generosity of the sponsors below, and many other individual backers. Sponsoring directly impacts the longevity of this project.
🥇🥇 Platinum sponsors ($5000+ total contribution): 🥇🥇
🥇 Gold sponsors ($2500+ total contribution):
🥈 Silver sponsors ($500+ total contributions):
Introduction
Anything that can be derived from the application state, should be. Automatically.
MobX is a signal based, battle-tested library that makes state management simple and scalable by transparently applying functional reactive programming. The philosophy behind MobX is simple:
A quick example
So what does code that uses MobX look like?
import React from "react"
import ReactDOM from "react-dom"
import { makeAutoObservable } from "mobx"
import { observer } from "mobx-react-lite"
// Model the application state.
function createTimer() {
return makeAutoObservable({
secondsPassed: 0,
increase() {
this.secondsPassed += 1
},
reset() {
this.secondsPassed = 0
}
})
}
const myTimer = createTimer()
// Build a "user interface" that uses the observable state.
const TimerView = observer(({ timer }) => (
<button onClick={() => timer.reset()}>Seconds passed: {timer.secondsPassed}</button>
))
ReactDOM.render(<TimerView timer={myTimer} />, document.body)
// Update the 'Seconds passed: X' text every second.
setInterval(() => {
myTimer.increase()
}, 1000)
The observer wrapper around the TimerView React component will automatically detect that rendering
depends on the timer.secondsPassed observable, even though this relationship is not explicitly defined. The reactivity system will take care of re-rendering the component when precisely that field is updated in the future.
Every event (onClick / setInterval) invokes an action (myTimer.increase / myTimer.reset) that updates observable state (myTimer.secondsPassed).
Changes in the observable state are propagated precisely to all computations and side effects (TimerView) that depend on the changes being made.
This conceptual picture can be applied to the above example, or any other application using MobX.
Getting started
To learn about the core concepts of MobX using a larger example, check out The gist of MobX page, or take the 10 minute interactive introduction to MobX and React.
The philosophy and benefits of the mental model provided by MobX are also described in great detail in the blog posts UI as an afterthought and How to decouple state and UI (a.k.a. you don’t need componentWillMount).
Further resources
The MobX cheat sheet (£5) is both useful and sponsors the project
The MobX awesome list – a long list of MobX resources and example projects
The MobX book
The MobX Quick Start Guide ($24.99) by Pavan Podila and Michel Weststrate is available as an ebook, paperback, and on the O'Reilly platform (see preview).
Videos
Introduction to MobX & React in 2020 by Leigh Halliday, 17 min.
ReactNext 2016: Real World MobX by Michel Weststrate, 40 min, slides.
CityJS 2020: MobX, from mutable to immutable, to observable data by Michel Weststrate, 30 min.
OpenSourceNorth: Practical React with MobX (ES5) by Matt Ruby, 42 min.
HolyJS 2019: MobX and the unique symbiosis of predictability and speed by Michel Weststrate, 59 min.
React Amsterdam 2016: State Management Is Easy by Michel Weststrate, 20 min, slides.
{🚀} React Live 2019: Reinventing MobX by Max Gallo, 27 min.
Credits
MobX is inspired by reactive programming principles, which are for example used in spreadsheets. It is inspired by model–view–viewmodel frameworks like MeteorJS's Tracker, Knockout and Vue.js, but MobX brings transparent functional reactive programming (TFRP, a concept which is further explained in the MobX book) to the next level and provides a standalone implementation. It implements TFRP in a glitch-free, synchronous, predictable and efficient manner.
A ton of credit goes to Mendix for providing the flexibility and support to maintain MobX and the chance to prove the philosophy of MobX in a real, complex, performance critical applications.