MobX, or: Going from Mutable to Immutable to Reactive State Management
summary
A demo e‑commerce app with orders, currencies and exchange rates compares three approaches: mutable state that re‑renders the whole tree, immutable state with memo/useCallback that needs custom selectors, and observable state using useLocalObservable + observer and makeAutoObservable that only re‑renders the two rows affected when a currency changes. The code moves domain logic into factory observables for easy unit testing, splits currency lines into small components for performance, and recommends avoiding decorators; large companies (Microsoft, EA, Netflix, Amazon) use MobX. useLocalObservable + observer makeAutoObservable
AI-written summary · about
chapters (10)
- 0:00Start
- 3:53Mutable Data
- 12:54Immutable Data
- 14:40Demo
- 17:25Observable Data
- 17:48Idiomatic MobX
- 21:19Computations are an orthnogonal render tree
- 26:06Split into small components
- 27:32Decouple doman logic and state from UI
- 30:30Conclusion
related talks
09mMobX - Performance and Sanity
14mState management without pain
37mApplication state management
25mMobX vs Redux: Comparing the Opposing Paradigms
24mMobX; Hight Performance Library
48mMutable or Immutable? Let's do both!
59mMobX and the unique symbiosis of predictability and speed
48mGoing big with MobX