---
name: mobx
summary: "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."
language: TypeScript
license: MIT
repo: https://github.com/mobxjs/mobx
source: https://opensources.dev/resource/mobx
health: 100
---
# 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.
---
## title: About MobX
sidebar_label: About MobX
hide_title: true
# MobX
*Simple, scalable state management.*
[](https://github.com/mobxjs/mobx/discussions)
[](https://badge.fury.io/js/mobx)
[](backers-sponsors.md#backers)
[](backers-sponsors.md#sponsors)
[](https://changelogs.xyz/mobx)
---
MobX is made possible by the generosity of the sponsors below, and many other [individual backers](backers-sponsors.md#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?
```javascript
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 }) => (
))
ReactDOM.render(, 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**](the-gist-of-mobx.md) page, or take the [**10 minute interactive introduction to MobX and React**](https://mobx.js.org/getting-started).
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](https://michel.codes/blogs/ui-as-an-afterthought) and [How to decouple state and UI (a.k.a. you don’t need componentWillMount)](https://hackernoon.com/how-to-decouple-state-and-ui-a-k-a-you-dont-need-componentwillmount-cc90b787aa37).
## Further resources
- The [MobX cheat sheet](https://gum.co/fSocU) (£5) is both useful and sponsors the project
- [10 minute interactive introduction to MobX and React](https://mobx.js.org/getting-started)
- [Egghead.io course, based on MobX 3](https://egghead.io/courses/manage-complex-state-in-react-apps-with-mobx)
- The [MobX awesome list](https://github.com/mobxjs/awesome-mobx#awesome-mobx) – a long list of MobX resources and example projects
### The MobX book
The [**MobX Quick Start Guide**](https://www.packtpub.com/product/mobx-quick-start-guide/9781789344837) ($24.99) by [Pavan Podila](https://twitter.com/pavanpodila) and [Michel Weststrate](https://twitter.com/mweststrate) is available as an [ebook](https://www.packtpub.com/product/mobx-quick-start-guide/9781789344837), [paperback](https://www.amazon.com/MobX-Quick-Start-Guide-Supercharge/dp/1789344832), and on the [O'Reilly platform](https://www.oreilly.com/library/view/mobx-quick-start/9781789344837/) (see [preview](https://books.google.com/books?id=ALFmDwAAQBAJ&printsec=frontcover#v=onepage&q&f=false)).
### Videos
- [Introduction to MobX & React in 2020](https://www.youtube.com/watch?v=pnhIJA64ByY) by Leigh Halliday, *17 min*.
- [ReactNext 2016: Real World MobX](https://www.youtube.com/watch?v=Aws40KOx90U) by Michel Weststrate, *40 min*, [slides](https://docs.google.com/presentation/d/1DrI6Hc2xIPTLBkfNH8YczOcPXQTOaCIcDESdyVfG_bE/edit?usp=sharing).
- [CityJS 2020: MobX, from mutable to immutable, to observable data](https://youtu.be/sP7dtZm_Wx0?t=27050) by Michel Weststrate, *30 min*.
- [OpenSourceNorth: Practical React with MobX (ES5)](https://www.youtube.com/watch?v=XGwuM_u7UeQ) by Matt Ruby, *42 min*.
- [HolyJS 2019: MobX and the unique symbiosis of predictability and speed](https://www.youtube.com/watch?v=NBYbBbjZeX4&list=PL8sJahqnzh8JJD7xahG5zXkjfM5GOgcPA&index=21&t=0s) by Michel Weststrate, *59 min*.
- [React Amsterdam 2016: State Management Is Easy](https://www.youtube.com/watch?v=ApmSsu3qnf0&feature=youtu.be) by Michel Weststrate, *20 min*, [slides](https://speakerdeck.com/mweststrate/state-management-is-easy-introduction-to-mobx).
- {🚀} [React Live 2019: Reinventing MobX](https://www.youtube.com/watch?v=P_WqKZxpX8g) 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](https://docs.meteor.com/api/tracker.html), [Knockout](https://knockoutjs.com/) and [Vue.js](https://vuejs.org/), but MobX brings *transparent functional reactive programming* (TFRP, a concept which is further explained in the [MobX book](https://www.packtpub.com/product/mobx-quick-start-guide/9781789344837)) 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](https://github.com/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.