This document discusses MobX and MobX State Tree for state management in React applications. It explains that MobX makes state observable and uses reactive programming to automatically re-render components when the state changes. MobX State Tree builds on MobX and adds immutability and time travel debugging capabilities similar to Redux. The document provides examples of how to structure stores with MobX State Tree and when it may not be suitable compared to raw MobX.

1. MobX & MST
/
mail@hyunseob.me
State Management

2. 1. MobX ? 🤔

3. ⚡
" , ."
(observable)
MobX

5. observable
1 " "
render " "
render observable

6. 2. MobX ✅

7. React ❌
State Management ❌
Redux ?

8. Easy to Use
👌
API
OOP,

9. TypeScript 💕
API
TypeScript 👍 ( )

10. 3. 😖

11. Real Life Example )
:
..?
😔

12. Serialize / Deserialize
JSON observable
constructor assign
Deserialize 👿
Server Side Rendering 😣

14. 🤦

15. 😩
mobx serialize / deserialize

17. ..
Store / Store
Singleton Pattern
Dependency Injection
API
Error Handling
...

18. 4. MobX State Tree 🌳

19. , Redux VS MobX
Immutable
State
Pure Object
Serialize
Single Root Tree 🌳
/
Time Traveling ⏳
Redux MobX
Mutable
State 👌
Serialize
/ 💅
Time Traveling

20. MobX State Tree 🌳
MobX Redux
Single Tree 🌳
Mutable, But Immutable Snapshot
MobX ✅
MobX
Opinionated. .

21. ☝
( )
TypeScript
PropTypes
🤔
Serialize / Deserialize
MobX ⭐⭐
!

22. observable
computed
action

23. MobX State Tree 🌳
Immutable ✅ (Snapshot)
State
Pure Object ✅ (Snapshot)
Serialize ✅
✅
Single Root Tree 🌳 ✅
✅
/
Time Traveling ⏳ ✅
Redux MobX
Mutable ✅
State 👌 ✅
✅
Serialize
✅
/ 💅 ✅
Time Traveling

24. Demo 👀

25. 🎈
State Tree
,
observable
API
Reference ( )
Snapshot Immutable

26. Memoization (without reselect)
(redux-devtools, mobx-devtools, wiretab..)
( LocalStorage )
...

27. 🙅
Magic ( )
MobX
( )
yield

28. When not to use MST?
"If you have a performance critical application that handles a
huge amount of mutable data, you will probably be better off by
using 'raw' MobX, which has a predictable and well-known
performance and much less overhead."

29. 5. Practices

31. AppStore
UserStore NotificationStore PieStore InviteeStore ...

32. AppStore
UserStore NotificationStore PieStore ProjectStore ...
AdminStore
InviteeStore ActiveUserStore ...

34. View
Global
React State

35. LogInPage
LogInForm
isSubmitting
...

36. LogInPage
LogInForm
isSubmitting
...
LogInStore

39. id

40. Root
TodoStore UserStore
User

43. 🙇
mail@hyunseob.me
github.com/hyunseob
twitter.com/hyunseob_