MobX Patterns

Quick Guide: MobX suits client state with many derived values, where fine-grained tracking beats manual subscription. makeAutoObservable builds stores, observer from mobx-react-lite makes components reactive, and flow or runInAction carries state changes across an await. Three facts decide most of the debugging: MobX tracks property reads inside tracked functions rather than values, code after an await is no longer inside its action, and every reaction returns a disposer that has to be called.

Detailed Resources:

• examples/core.md — store creation with makeAutoObservable and makeObservable, factory stores, observer, useLocalObservable
• examples/advanced.md — computed values, actions, async with flow and runInAction, reactions
• examples/architecture.md — root store, TypeScript annotations, performance

<critical_requirements>

Before writing MobX code

Call makeAutoObservable(this) in the constructor of every store class. Without it the properties stay plain JavaScript and nothing re-renders — the store looks correct and simply never notifies.

Reach for makeObservable with explicit annotations wherever inheritance is involved. makeAutoObservable throws on any class that extends another, so a base class and its subclasses both annotate by hand.