# MobX — Simple Scalable State Management for JavaScript

> MobX is a transparent reactive state management library that makes state management simple and scalable by applying functional reactive programming principles to JavaScript and TypeScript applications.

## Install

Save as a script file and run:

# MobX — Simple Scalable State Management for JavaScript

## Quick Use
```bash
npm install mobx mobx-react-lite
```
```tsx
import { makeAutoObservable } from "mobx";
import { observer } from "mobx-react-lite";

class Timer {
  seconds = 0;
  constructor() { makeAutoObservable(this); }
  inc() { this.seconds++; }
}
const timer = new Timer();
const TimerView = observer(() => <span>{timer.seconds}</span>);
```

## Introduction
MobX takes a fundamentally different approach to state management than Redux or similar flux architectures. Instead of explicit actions and reducers, MobX automatically tracks which observables a component uses and re-renders only when those specific values change. This makes it intuitive for developers familiar with object-oriented patterns while keeping reactivity efficient.

## What MobX Does
- Automatically tracks observable state and re-renders only affected components
- Supports classes, plain objects, arrays, Maps, and Sets as observable state
- Provides computed values that derive state and cache results until dependencies change
- Offers reactions and autorun for side effects triggered by state changes
- Works with React, Vue, Angular, and vanilla JavaScript

## Architecture Overview
MobX uses a transparent dependency graph. When a value decorated as observable changes, MobX walks its internal graph to find every derivation (computed value or reaction) that depends on it, then updates only those. This fine-grained reactivity avoids unnecessary re-renders. Actions batch mutations so derivations update only once per transaction.

## Self-Hosting & Configuration
- Install via npm or yarn as a library dependency — no server needed
- Enable decorators via TypeScript or Babel plugin, or use makeAutoObservable without decorators
- Configure enforceActions to require all mutations happen inside actions
- Use configure({ useProxies: "never" }) for environments without Proxy support (e.g., IE11)
- Integrate with React via mobx-react-lite (function components) or mobx-react (class components)

## Key Features
- Zero-boilerplate state management with makeAutoObservable
- Fine-grained reactivity: only components reading changed data re-render
- Computed values with automatic caching and lazy evaluation
- Built-in support for asynchronous flows via flow() generator functions
- MobX State Tree (MST) adds opinionated structure with snapshots, patches, and time-travel debugging

## Comparison with Similar Tools
- **Redux** — explicit actions and reducers give predictability; MobX trades boilerplate for simplicity
- **Zustand** — minimal hook-based store; MobX offers richer reactivity and computed values
- **Jotai** — atomic state model; MobX uses mutable objects with transparent tracking
- **Recoil** — atom/selector graph for React; MobX is framework-agnostic
- **Pinia** — Vue-specific store with devtools; MobX works across frameworks

## FAQ
**Q: Is MobX suitable for large applications?**
A: Yes. MobX scales well because its fine-grained reactivity avoids performance issues common with top-down state propagation. MobX State Tree adds structure for complex domain models.

**Q: Does MobX work with React Server Components?**
A: MobX is designed for client-side reactivity. Server components that need no interactivity do not need MobX; use it in client components where state management is required.

**Q: How does MobX compare to Redux in performance?**
A: MobX typically outperforms Redux in scenarios with many independent UI updates because it re-renders only affected components, whereas Redux re-runs all connected selectors on every dispatch.

**Q: Can MobX and Redux coexist in the same project?**
A: Technically yes, but mixing two state management paradigms adds complexity. Most teams choose one and stick with it.

## Sources
- https://github.com/mobxjs/mobx
- https://mobx.js.org

---
Source: https://tokrepo.com/en/workflows/1e60f034-4409-11f1-9bc6-00163e2b0d79
Author: Script Depot