MobX is a state management library that can be used with React to simplify sharing state between components. It allows creating observable stores that can be imported into multiple components. This avoids needing to pass props through many levels to reach deep child components. MobX has features like observable, observer, computed and autorun that make it easy to watch for state changes and update components automatically. Stores can be created with observable objects and arrays then components simply use the store without needing to pass state through props.

1. Manage React state with MobX
Simple, scalable state management
Presented by Asif Nawaz

2. What is MobX?
• MobX is a super simple state management library. MobX is not a
React thing, this is a standalone library, but it’s very popular with
React JS. People are very comfortable with this combination.

3. React Has State, why on earth we need MobX?
WHY?

4. Look at this component tree
State in React JS is pretty component
specific thing. It’s hard to pass it to
another component and its pretty
complex to pass it to a component
when it’s bit far away.
Imagine we need to change a of B5
component from A3 component.

5. Here MobX is to rescue you
• You can create data store with observable array, object etc. with
MobX
• Import it to multiple components
• Share the data between components in an organize way.
• No need to pass props through many components to reach the
grand child.

6. Installation for “create-react-app”
• The Library: npm install mobx –save
• React bindings: npm install mobx-react --save

7. Oh! We need decorator support!
• npm install babel-plugin-transform-decorators-legacy –-save-dev
• npm run eject
• Add this babel plugin in webpack config file,
webpack.config.dev.js and webpack.config.prod.js

8. It has 4 features
• Observable
• Observer
• Computed
• Autorun

9. A MobX Store

10. Pass it to a component

11. Use it!

12. autorun
• Autorun is for observing multiple variable and do something when
their value change.

13. DevTools
• Install it: npm install --save-dev mobx-react-devtools
• Import and use in a parent level component like this

14. Links
• mobx.js.org
• mobx.js.org/getting-started.html
• github.com/mobxjs/mobx-react-devtools
• github.com/foxhound87/mobx-react-form
• Presentation would be found here
https://www.slideshare.net/secret/36hXs93Ofz06yZ

15. Questions are welcome

16. Asif Nawaz A.K.A. asifsaho
• Twitter @asifsaho
• Facebook fb.me/asifsaho.me
• Email: info@asifsaho.me