title: How to initialize MobX store with async data (AsyncStorage) in React Native
body: <p>We created a simple MobX store to save an object. This MobX store also syncs with AsyncStorage every time fooObject is changed:</p>
  
  <pre><code>import { observable } from 'mobx';
  
  class FooStore {
    @observable fooObject = {};
  
    setFooObject(newFooObject) {
      this.fooObject = newFooObject;
      this.syncWithAsyncStorage();
    }
  
    syncWithAsyncStorage() {
      AsyncStorage.setItem('fooObject', JSON.stringify(this.fooObject));
    }
  </code></pre>
  
  <p>This mobx store is then consumed by various screens in the app. </p>
  
  <p>As you can see, we use RN <code>AsyncStorage</code>, which is kind of a LocalStorage but for native apps, to always store the current state of <code>fooObject</code>. </p>
  
  <p>The question is: when the app is closed, we loose FooStore state, so we want to retrieve the last 'save' we did to AsyncStorage (which is persisted). </p>
  
  <p>The problem is AsyncStorage is (as the name states) an ASYNC function, and we can't wait for a promise resolution in FooStore's constructor. </p>
  
  <p>How one would accomplish this initial state initialization of this MobX store based on the resolved return value of AsyncStorage?</p>
  
  <p>We thought about writing an initialization method (async method) in FooStore like this:</p>
  
  <pre><code>async initializeFromAsyncStorage() {
    this.fooObject = await JSON.parse(await AsyncStorage.getItem('fooObject'));
  }
  </code></pre>
  
  <p>And then call this method on app initialization in our root App.js.</p>
  
  <p>But I'm not sure if this would present unintended side effects and if this is idiomatic mobx/react-native. </p>