📦
State Management2M+/wkMIT

mobx

MobX is a battle-tested state management library that makes state management simple and scalable through transparent functional reactive programming. MobX autom

Installation

npm
npm install mobx mobx-react-lite
yarn
yarn add mobx mobx-react-lite
pnpm
pnpm add mobx mobx-react-lite

Import

ESM
import { makeAutoObservable } from 'mobx';

Quick Example

usage
import { makeAutoObservable } from 'mobx';
import { observer } from 'mobx-react-lite';

class Counter {
  count = 0;
  constructor() { makeAutoObservable(this); }
  increment() { this.count++; }
}

const counter = new Counter();

const CounterView = observer(() => (
  <button onClick={() => counter.increment()}>{counter.count}</button>
));

About mobx

MobX is a battle-tested state management library that makes state management simple and scalable through transparent functional reactive programming. MobX automatically tracks which state properties are used by each component and re-renders only the components that depend on changed properties, providing optimal rendering performance without manual optimization. State in MobX is defined using observable properties, computed values derive from state automatically and are cached until their dependencies change, actions modify state with automatic batching, and reactions (autorun, when, reaction) perform side effects when observed state changes. MobX supports classes with decorators (@observable, @computed, @action) and a functional API (makeObservable, makeAutoObservable) that automatically makes all properties observable and all methods actions. The library integrates with React through mobx-react-lite, providing an observer HOC that makes components reactive to observable state changes. MobX's philosophy differs fundamentally from Redux — instead of explicit action dispatching and reducer functions, MobX uses mutable state with automatic dependency tracking. This approach reduces boilerplate significantly and provides a more natural programming model for developers accustomed to object-oriented patterns. MobX is particularly popular in enterprise applications and teams with Java/C# backgrounds.

Quick Facts

Packagemobx
CategoryState Management
Weekly Downloads2M+
LicenseMIT
Installnpm install mobx mobx-react-lite

Related Packages

Browse npm Packages by Category

Explore our reference of 200 popular npm packages with install commands, examples, and quick-start guides.