State Management in React Native with Mobx - The Basics

If you're interested in MobX, you probably know a little bit about Redux. MobX is a more lightweight, flexible state management solution for your React Native app. While it isn't best for ALL apps, it's definitely an option to consider when creating new apps. This video will help you get started.
00:15 Reviewing initial code with setState/useState
03:40 Moving the state to a central class
12:21 Adding observable state, actions, and computed values
15:58 Watching state using the observer higher order component
18:25 Rebuild specific widgets when state changes
💻Follow along with the initial code: github.com/theflutterfactory/...
⚡Connect on Facebook: / flutterfactory
⚡Connect on Twitter: / flutterfactory
🎷Music: www.bensound.com

[@ejikeezekwunem4162]

This is the easiest and most direct tutorial I found on Mobx. Thanks for sharing.

[@TiagoJesusSousaGama]

Congratulations, The Flutter Factory! The clearest explanation I have seen so far! 🇧🇷😀

[@t-damer]

Really good tutorial, I am learning react-native by creating todo app and it was really helpful to understand basics of storage management, also really fits usual project (I mean, projects that use useState and want to jump to MobX)

[@derobpe1990]

Have been troubling around with mobX and any video was helpful until I came across this video. I have follow all the tutorial using the git template. Not really onto comment on videos, but it really deserves it. Thank you for your time and for sharing! regards from Spain.

[@TheFlutterFactory]

Glad it helped🙂

[@ArifDewi1331]

Thank man! Nice and clear! 👍

[@mubin-ansari]

Thanks a lot for this tutorial!

[@TheFlutterFactory]

You're welcome

[@kakarnyori5457]

Very nice explanation! One thing I wanted to point out was that, mobx states are mutable. So you could just push the new item (in your case the superHero) to the item list.

[@TheFlutterFactory]

Good point!

[@burakenaktas]

You are the superhero :D

[@ywong9371]

Thanks for the great tutorial. It is really helpful. What if I want to have multiple stores? Should I use the same way to handle those stores? Or is there a better way to implement it?

[@TheFlutterFactory]

There's no correct answer for that. It's up to you and how you feel need to architect your app.

[@Guide4Ever]

Passing Math.Random() seems very risky to pass as an Id since it can happen that Id will be duplicated in the future (crashes the app due to thrown error) - assuming you use that id with keyextractor ofc. I'd advise an increment approach since it guarantees ascending array of ids. What is your opinion?
Nonetheless a very productive tutorial, learnt a lot. Also a beginner.

[@ishaiyaish3207]

Hi, which emulator do you use for displaying the app?

[@TheFlutterFactory]

It's just a random iOS emulator in Xcode. you can choose whichever you device you want in the IDE

[@francescofreddi4374]

mobX exists also for Flutter.......... :)

[@TheFlutterFactory]

I never said it didn't 🙂.

[@francescofreddi4374]

ehmmmmm i know only Flutter.... i want to say... also in Flutter you will prepare this topic? really?

[@TheFlutterFactory]

I don't think so. I doubt there will be much interest in mobx for flutter. Provider, GetX, and Bloc are all MUCH better options for state management in Flutter. They were built specifically for Flutter. Mobx was created for js and later ported to Flutter. (same with Redux)

[@francescofreddi4374]

@@TheFlutterFactory whats do you know better? Flutter or ReactNative... and now, whats the best for you?

[@TheFlutterFactory]

Flutter is my favorite. It's just more fun. Flutter is also growing faster than react native.

[@RandomCrap]

I loved mobx until they removed the decorators.. They made all of the coding 10000 times more tricky and overall a shitty solution.. They fucked up the library entirely