Master MobX for Technical Interviews
Observables, computeds, actions, reactions, observer, makeAutoObservable, stores, React Context, testing, common gotchas, and MobX vs Redux vs Zustand. 24 lessons with an editable, runnable simulator of the reactivity model.
- Step 1
MobX 1: What Is MobX? The Reactivity Model
**MobX is transparent functional reactive programming**. You declare state as observable, derivation...
Start Lesson - Step 2
MobX 2: observable & makeObservable
`observable` marks data reactive. For class-based stores, use **`makeObservable(this, { ... })`** to...
Start Lesson - Step 3
MobX 3: makeAutoObservable — The Shortcut
`makeAutoObservable(this)` infers annotations: **fields** become observable, **methods** become acti...
Start Lesson - Step 4
MobX 4: action — Atomic State Mutations
`action` groups mutations into a single atomic transaction. Observers see the world only *after* the...
Start Lesson - Step 5
MobX 5: computed — Auto-Memoized Derivations
`computed` turns a getter into a **memoized derivation**: runs once, caches result, re-runs only whe...
Start Lesson - Step 6
MobX 6: autorun — Your First Reaction
`autorun(fn)` runs `fn` once immediately, tracks every observable it reads, and re-runs `fn` wheneve...
Start Lesson - Step 7
MobX 7: reaction vs autorun vs when
**`autorun`** re-runs on *any* dep change. **`reaction(data, effect)`** decouples tracking from effe...
Start Lesson - Step 8
MobX 8: observable.box — Primitive Observables
`observable.box<T>(initial)` wraps a **primitive** (string, number, boolean) into an observable cont...
Start Lesson - Step 9
MobX 9: Deep vs Shallow vs Ref
By default `observable` is **deep** — nested objects/arrays become observable too. Use `observable.s...
Start Lesson - Step 10
MobX 10: observable arrays, maps, and sets
MobX provides reactive **Arrays**, **Maps**, and **Sets** with the same API as their native counterp...
Start Lesson - Step 11
MobX 11: toJS — Serializing Observables
`toJS(obj)` recursively converts observable structures back to plain JS objects/arrays. Needed for J...
Start Lesson - Step 12
MobX 12: The Derivation Graph
Under the hood, MobX builds a **dependency graph**: observables → computeds → reactions. A write inv...
Start Lesson - Step 13
MobX 13: Transactions & Batching
Mutations inside an action are **batched**: observers fire once at the end, not per mutation. This i...
Start Lesson - Step 14
MobX 14: configure — Strict Mode & Tuning
`configure` sets global MobX behavior: strictness, proxy policy, computed rules. In production apps,...
Start Lesson - Step 15
MobX 15: observer — the React Bridge
`observer(Component)` from `mobx-react-lite` wraps a function component in a reaction. Every observa...
Start Lesson - Step 16
MobX 16: Local vs Global Observable State
Not every observable lives in a big store. **`useLocalObservable`** from mobx-react-lite creates a c...
Start Lesson - Step 17
MobX 17: Provider + Context Pattern
For app-wide stores, use React Context to make them injectable. Components consume via a typed `useS...
Start Lesson - Step 18
MobX 18: Controlled Forms with MobX
Forms are ideal for MobX: a single store holds field values + validation + submit state....
Start Lesson - Step 19
MobX 19: Async Data Fetching Store
Loading, data, and error — the three states of every async request. A store owns them and exposes co...
Start Lesson - Step 20
MobX 20: Optimistic UI with useOptimistic-style MobX
MobX is perfect for optimistic updates: mutate locally, send to server, rollback on failure....
Start Lesson - Step 21
MobX 21: Granular Row Re-renders in Lists
A list of 1000 items where one changes should re-render only that one row. Key: wrap each row in `ob...
Start Lesson - Step 22
MobX 22: Derived Stores — Cross-Store Composition
A derived store reads from other stores to produce a combined view. Example: `CheckoutStore` that de...
Start Lesson - Step 23
MobX 23: Lazy Initialization with onBecomeObserved
`onBecomeObserved` / `onBecomeUnobserved` fire when a specific observable starts/stops being watched...
Start Lesson - Step 24
MobX 24: Disposers & Cleanup in React
Reactions hold references. In React, create reactions in `useEffect` and **return the disposer** so ...
Start Lesson - Step 25
MobX 25: LocalStorage Persistence via autorun
Persist store state with one autorun: serialize on every change. Rehydrate once on boot....
Start Lesson - Step 26
MobX 26: Debounced Search with MobX + React
Debouncing a query is a two-layer concern: store owns the query and results; UI owns the debounce ti...
Start Lesson - Step 27
MobX 27: Pagination Store
Pagination needs page number + page size + total + fetched items. A small computed reveals last page...
Start Lesson - Step 28
MobX 28: Infinite Scroll
Instead of pages, append. `hasMore` boolean + `loadMore()` action + IntersectionObserver on a sentin...
Start Lesson - Step 29
MobX 29: Form Wizard with Per-Step Validation
Multi-step form: a `step` observable + computed validation per step....
Start Lesson - Step 30
MobX 30: Undo/Redo Stack
Keep a history of snapshots; push on each action, pop on undo....
Start Lesson - Step 31
MobX 31: Toast Notification Service
A global `ToastStore` with an `observable.array`; push/auto-dismiss via setTimeout....
Start Lesson - Step 32
MobX 32: Modal Manager
Same pattern as toasts: a `ModalStore` owns `open: Modal | null` and `open()/close()` actions....
Start Lesson - Step 33
MobX 33: Authentication Store
Auth store with `user`, `loading`, and computed `isLoggedIn`....
Start Lesson - Step 34
MobX 34: Router-Like State with History
Route is a store field. Back-forward is a stack. Integrates with URL via popstate....
Start Lesson - Step 35
MobX 35: Derived Selectors (Computed Composition)
Express domain queries as chained computeds; each layer is memoized independently....
Start Lesson - Step 36
MobX 36: Computed Structural Equality
By default, computeds compare with `===`. `computed.struct` (or `comparer.structural`) does a deep e...
Start Lesson - Step 37
MobX 37: keepAlive Computed
By default, a computed with no observers is torn down and recomputed from scratch on next read. `kee...
Start Lesson - Step 38
MobX 38: spy() — MobX's Event Stream
`spy(handler)` is a global event stream: every action, reaction, observable change emits an event. B...
Start Lesson - Step 39
MobX 39: trace() for Targeted Debugging
`trace(store, 'field')` inside a reaction prints WHY the reaction re-fires. Invaluable for 'why is t...
Start Lesson - Step 40
MobX 40: mobx-logger Alternative
Minimal pattern: an autorun spying on a store prints mutations to the console — poor man's devtools....
Start Lesson - Step 41
MobX 41: Running Multiple Stores in React
Pattern: one React Provider with a RootStore that contains all domain stores....
Start Lesson - Step 42
MobX 42: Custom useStore Hook with Types
Strongly-typed `useStore()` avoids repetitive generics at call sites....
Start Lesson - Step 43
MobX 43: TypeScript Patterns with MobX
Annotate observables as typed class fields; let `makeAutoObservable` do the rest....
Start Lesson - Step 44
MobX 44: Testing a Store in Isolation
MobX stores are POJO classes — test them with any runner. Fresh store per test....
Start Lesson - Step 45
MobX 45: Testing observer Components
Render an observer component with React Testing Library; mutate the store; assert new DOM....
Start Lesson - Step 46
MobX 46: Atoms — The Low-Level Primitive
`createAtom(name, onBecomeObserved?, onBecomeUnobserved?)` lets you build custom observables. Used i...
Start Lesson - Step 47
MobX 47: WebSocket Subscription Store
A store that lazy-connects on first read, disconnects when no observers remain....
Start Lesson - Step 48
MobX 48: Async Flows with flow() Generators
`flow(generatorFn)` lets you write async actions as generators: yield promises, no `runInAction` nee...
Start Lesson - Step 49
MobX 49: Action Parameters & Logging
Actions can be named via `action('name', fn)` — names show up in devtools and spy events....
Start Lesson - Step 50
MobX 50: Error Boundary + Observer
React Error Boundaries catch render errors. Combine with observer: a store error flows into a render...
Start Lesson - Step 51
MobX 51: DI with RootStore + Interface Split
Larger apps split stores into interfaces. RootStore holds concrete impls; tests swap with mocks....
Start Lesson - Step 52
MobX 52: Domain Entities with Methods
Not every observable is a store. Entities (Todo, Message, Order) can carry their own methods....
Start Lesson - Step 53
MobX 53: Performance Checklist
(1) observer each row of a list. (2) computed for derived data. (3) action-wrap rapid mutations. (4)...
Start Lesson - Step 54
MobX 54: observable over POJOs vs Classes
Classes shine for stores with methods/computeds. `observable({...})` fits lightweight state....
Start Lesson - Step 55
MobX 55: when() as a Promise
`when(pred)` (without effect) returns a **Promise** that resolves when pred is true. Perfect for one...
Start Lesson - Step 56
MobX 56: MobX vs Redux Head-to-Head
Same counter, two approaches. Redux: actions + reducers + dispatch. MobX: observables + mutations + ...
Start Lesson - Step 57
MobX 57: MobX vs Zustand
Zustand: small, hooks-based, immutable. MobX: reactive, mutable, class-oriented....
Start Lesson - Step 58
MobX 58: Common Pitfall — Destructuring Observables
`const { name } = store` **snapshots** — reactivity lost. Destructure inside render to keep tracking...
Start Lesson - Step 59
MobX 59: Common Pitfall — Passing a Primitive to a Memoized Child
Parent observer reads `store.n`, passes to child. Child is memoized. Parent re-renders on every `n` ...
Start Lesson - Step 60
MobX 60: mobx-react vs mobx-react-lite
mobx-react-lite = function components only, tiny (~8kb). mobx-react = lite + class-component HOCs + ...
Start Lesson - Step 61
MobX 61: Signals vs MobX Observables
Signals (Solid, Preact, Angular) and MobX observables share the 'reactive primitive' idea. MobX trac...
Start Lesson - Step 62
MobX 62: MobX-State-Tree (MST) — Brief Intro
MST adds: typed snapshots, actions-only mutations, middleware, and time-travel. Heavier but more str...
Start Lesson - Step 63
MobX 63: Scaling MobX in Large Apps
Rules of thumb at scale: one RootStore, per-feature subtrees, domain entities with methods, keep sid...
Start Lesson - Step 64
MobX 64: System Design — E-commerce Dashboard
Architect it live: Product catalog, Cart, Auth, Orders, UI state. Each is a store. Derivations link ...
Start Lesson - Step 65
MobX 65: Capstone — TodoMVC Interview Edition
Full TodoMVC: todos with CRUD, filter, computed leftCount, persistence. Ship-ready patterns....
Start Lesson