MobX Examples

February 13, 2026 · View on GitHub

Modern MobX 6 examples using TypeScript and Vite. Each example is a self-contained project that can be opened directly in CodeSandbox.

Examples

#	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