Modern MobX 6 examples using TypeScript and Vite. Each example is a self-contained project that can be opened directly in CodeSandbox.
| # | Example | Concepts | Open |
|---|---|---|---|
| 01 | Observable & Autorun | makeAutoObservable, autorun, dependency tracking |
CodeSandbox |
| 02 | Computed | computed getters, caching, lazy evaluation |
CodeSandbox |
| 03 | Actions | configure({ enforceActions }), action, batching |
CodeSandbox |
| 04 | runInAction | runInAction, async patterns |
CodeSandbox |
| 05 | Reaction | reaction, data vs effect functions, disposal |
CodeSandbox |
| 06 | When | when callback + promise form |
CodeSandbox |
| 07 | Observable Map | observable.map, dynamic keys |
CodeSandbox |
| 08 | Observable Array | Observable arrays, proxy behavior | CodeSandbox |
| 09 | React Todo | observer, mobx-react-lite, store + React Context |
CodeSandbox |
| 10 | React Timer | observer, computed, interval side effects |
CodeSandbox |
Each example is a standalone Vite project:
cd examples/01-observable-autorun
npm install
npm run dev| MobX 3 (old) | MobX 6 (new) |
|---|---|
mobx.observable({...}) + factory functions |
class + makeAutoObservable(this) |
mobx.extendObservable(this, {...}) |
makeAutoObservable(this) |
mobx.useStrict(true) |
configure({ enforceActions: "always" }) |
mobx.whyRun() |
Removed |
React.createClass + mobxReact.observer() |
observer(FunctionComponent) from mobx-react-lite |
mobxReact.Provider + inject() |
React Context + useContext() |
MIT
